reactコンポーネントの値を伝える3つの方法

reactコンポーネントを整理して値を伝える3つの方式。
親コンポーネントはサブアセンブリに値を送る（propsで値を送る）
サブコンポーネント:

  class Children extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
        <div>  ：{this.props.name}</div> //       
      )
    }
  }

親コンポーネント:

  class App extends React.Component{
    render(){
      return(
        <div>
          <Children name="   "/>
        </div>
      )
    }
  }

親コンポーネントからサブアセンブリに値を送る（コールバック関数）
サブコンポーネント

  class Children extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeColor('skyblue') //       changeColor                   
    }
    render(){
      return(
        <div>
          <div>       {this.props.bgcolor}</div> //               bgcolor
          <button onClick={(e)=>{this.handerClick(e)}}>       </button> //        
        </div>
      )
    }
  }

親コンポーネント

  class Father extends Component{
    constructor(props){
      super(props)
      this.state = {
        bgcolor:'pink'
      }
    }
    bgChange(color){
      this.setState({
        bgcolor:color
      })
    }
    render(props){
      <div style={{background:this.state.bgcolor}}>
              //          color 
        <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} /> 
                          // changeColor       =color     
      </div>
    }
  }

兄弟セットの値を伝えます。子は父に伝えて、父はもう一つの子に伝えます。
サブコンポーネント1

  class Children1 extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeChild2Color('skyblue') 
      //            changeChild2Color      
    }
    render(){
      return(
        <div>
          <div>children1</div>
          <button onClick={(e)=>{this.handerClick(e)}}>  children2  </button>
        </div>
      )
    }
  }

サブコンポーネント2

  class Children2 extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
        <div style={{background:this.props.bgcolor}}>
        //             
          <div>children2     {this.props.bgcolor}</div>
          // children2     skyblue
        </div>
      )
    }
  }  

親コンポーネント

class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      child2bgcolor:'pink'
    }
  }
  onchild2bgChange(color){
    this.setState({
      child2bgcolor:color
    })
  }
  render(props){
    <div>
      <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
      <Children2 bgcolor={this.state.child2bgcolor} />
    </div>
  }
}

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。