Reactの親コンポーネントと子コンポーネント間のデータ転送の詳細な説明

React をインポートします。{ コンポーネント } から 'react' をインポートします。
'./App.css' をインポートします。
'./child' から子をインポートします
クラスAppはComponentを拡張します{
    コンストラクタ(props){
        スーパー(小道具);
        this.state={
            メッセージ: '親クラスのメッセージ',
            名前:「ジョン」
            年齢:99
        }
    }
    コールバック=(メッセージ,名前,年齢)=>{
        // setState メソッド、msg の値を変更します。値は子から渡されます this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  与える（） {
    戻る （
      <div className="アプリ">
        <p> メッセージ: {this.state.msg}</p>
        <子コールバック={this.callback} 年齢={this.state.age} 
name={this.state.name}></Child>
      </div>
    );
  }
}
デフォルトのアプリをエクスポートします。

<子供の名前={this.state.name} 年齢={this.state.age}></子供>

「react」からReactをインポートします。
クラスChildはReact.Componentを拡張します{
    コンストラクタ(props){
        スーパー(小道具);
        this.state={
            名前:「アンディ」
            年齢:31歳
            msg:"サブクラスからのメッセージ"
        }
    }
    変更=()=>{
        this.props.callback(this.state.msg、this.state.name、this.state.age);
    }
    与える（）{
        戻る（
            <div>
                <div>{this.props.name}</div>
                <div>{this.props.age}</div>
                <button onClick={this.change}>クリック</button>
            </div>
        ）
    }
}
デフォルトの子をエクスポートします。

<div>{this.props.name}</div>
<div>{this.props.age}</div>

クラスAppはComponentを拡張します{
......
    コールバック=(メッセージ,名前,年齢)=>{
        // setState メソッド、msg の値を変更します。値は子から渡されます this.setState({msg});
        this.setState({name});
        this.setState({age});
    }
  与える（） {
    戻る （
      <div className="アプリ">
        <子コールバック={this.callback}></子>
      </div>
    );
  }
}
デフォルトのアプリをエクスポートします。

クラスChildはReact.Componentを拡張します{
......
    変更=()=>{
        this.props.callback(this.state.msg、this.state.name、this.state.age);
    }
    与える（）{
        戻る（
            <div>
                <button onClick={this.change}>クリック</button>
            </div>
        ）
    }
}
デフォルトの子をエクスポートします。