reactにおける親子コンポーネントのデータ転送、サブコンポーネント間のデータ転送

まず三つのjsファイルがあります.index.js(親コンポーネント)baseForm.js(サブコンポーネント)etabele.js(サブコンポーネント)
index.jsでarr配列を定義して、BaseFormコンポーネントに伝えます.

import React from 'react'
import BaseForm from '../components/baseForm'
import ETable from '../components/etable'
export default class IndexPage extends React.Component{
    state = {
        arr: [1,2,3,4,5]
    }
    changeArr = () => {
        this.setState({
            arr: [2,3,4,8,10]
        })
    }
    render () {
        return (
            

                
                
            
        )
    }
}

BaseFormコンポーネントでは、this.props.arrを介して親コンポーネントからの行列を取得し、this.com mmitChangeを介して親コンポーネントにイベントを転送することができます.

import React from 'react'
import {Button} from 'antd'
export default class BaseForm extends React.Component{
    initFormList = () => {
        const arr = this.props.arr;
        return arr.map((item) => {
            return {item}
        })
    }
    commitChange = () => {
        this.props.changeArr();
    }
    render () {
        return (
            

                {this.initFormList()}
                type="default"  onClick={this.commitChange}>  
            
        )
    }
}

親コンポーネントは、サブアセンブリから送信されたイベントを受信してデータを処理し、データをサブアセンブリに転送する.データはいずれも親から子一方向のデータストリームである.
reactにおけるデータ転送は一方向であるため、データストリームは親コンポーネントからサブコンポーネントにのみ流れることができる.サブコンポーネント間のデータ転送は、データを最初に彼らの共通の親コンポーネントに渡すことによって、親コンポーネントからサブコンポーネントに送ることができる.(もちろん、状態管理機構reduxによって制御することもできます.ここでは詳細には紹介しません.)まずプロップDataを通じて親コンポーネントにオブジェクトを転送します.
親コンポーネントはtobroothedataメソッドset Stateによって、他のサブアセンブリETableにデータを送るために設定されます.
ETableコンポーネント内部でデータを取得する

import React from 'react'
export default class ETable extends React.Component{
    state = {
        data: this.props.data
    };
    componentWillReceiveProps(nextProps) {
        this.setState({data: nextProps.data});
    }
    render () {
        return (
            

                {this.state.data.id}
            
        )
    }
}