整理 react 組件傳值 三種方式

父組件向子組件傳值（通過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>      )    }  }

父組件向子組件傳值（回調(diào)函數(shù)）

子組件

  class Children extends Component{    constructor(props){      super(props);    }    handerClick(){      this.props.changeColor('skyblue') // 執(zhí)行父組件的changeColor 并傳參 必須和父組件中的函數(shù)一模一樣    }    render(){      return(        <div>          <div>父組件的背景色{this.props.bgcolor}</div> // 子組件接收父組件傳過來的值 bgcolor          <button onClick={(e)=>{this.handerClick(e)}}>改變父組件背景</button> // 子組件執(zhí)行函數(shù)        </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 子組件的參數(shù)=color 當(dāng)做形參      </div>    }  }

兄弟組件傳值（子傳給父，父再傳給另一個(gè)子）

子組件1

  class Children1 extends Component{    constructor(props){      super(props);    }    handerClick(){      this.props.changeChild2Color('skyblue')       // 改變兄弟組件的顏色 把changeChild2Color的參數(shù)傳給父    }    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>  }}