整理 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> ) } }父組件向子組件傳值（回調函數）
子組件
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> }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
