Reactはいくつかの方法でパラメータを渡します

// 親コンポーネントのrender() {
        戻る （
                // 渡す必要のあるメソッドまたはパラメータを渡すにはカスタム属性を使用します <ShopUi toson={this.state}></ShopUi>
            ）
    } 

//サブコンポーネント//親コンポーネントから渡されたデータはthis.props.tosonを通じて取得できます

tograndson={this.props.toson}

//GrandsonコンポーネントのエクスポートデフォルトクラスGrandsonはComponentを拡張します{
    与える（）{
        戻る （
            <div style={{border: "1px solid red",margin: "10px"}}>
        {このプロパティ名}:
                <onChange を選択={this.props.handleSelect}>
                    <option value="男性">男性</option>
                    <option value="女性">女性</option>
                </選択>
            </div>
        ）
    }
};
 
//子コンポーネントのエクスポート デフォルトクラス Child extends Component {
    与える（）{
        戻る （
            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}: <input onChange={this.props.handleVal}/>
                <孫の名前="性別" handleSelect={this.props.handleSelect}/>
            </div>
        ）
    }
};
 
//親コンポーネントエクスポートデフォルトクラスParentはComponentを拡張します{
 
    コンストラクタ(props){
        スーパー(小道具)
        this.state={
            ユーザー名: ''、
            性別: ''
        }   
    },
    ハンドルVal(イベント){
        this.setState({ユーザー名: イベントターゲット値});
    },
    ハンドル選択(値) {
        this.setState({性別: イベントターゲット値});
    },
    与える（）{
        戻る （
            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>ユーザー名: {this.state.username}</div>
                <div>ユーザーの性別: {this.state.sex}</div>
                <Child name="名前" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        ）
    }
}

 <ハッシュルーター> 
    <スイッチ> 
        <ルートの正確なパス="/" コンポーネント={Home}/> 
        <ルートの正確なパス="/detail" コンポーネント={Detail}/> 
    </スイッチ> 
</ハッシュルーター> 

<li onClick={el => this.props.history.push({
   パス名:'/detail',
     状態:{id:3}
})}
>
</li>

クラス Index は Component を拡張します {
  静的な子コンテキストタイプ = {
    テーマカラー: PropTypes.文字列
  }

  コンストラクタ（）{
    素晴らしい（）
    this.state = { テーマカラー: '赤' }
  }

  子コンテキストを取得する() {
    戻り値: this.state.themeColor }
  }

  与える （） {
    戻る （
      <div>
        <ヘッダー />
        <メイン />
      </div>
    ）
  }
}

クラス Title は Component を拡張します {
  静的コンテキストタイプ = {
    テーマカラー: PropTypes.文字列
  }

  与える （） {
    戻る （
      <h1 style={{ color: this.context.themeColor }}>タイトル</h1>
    ）
  }
}