react 传值有哪几种方式？

父组件向子组件传值（通过props传值）

子组件：

1 2 3 4 5 6 7 8 9 10

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

父组件:

1 2 3 4 5 6 7 8 9

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

父组件向子组件传值（回调函数）

子组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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>     )   } }

父组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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>     )   } }

父组件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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>   } }