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