使用react怎么实现组件传值

本篇文章给大家分享的是有关使用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>   } }

以上就是使用react怎么实现组件传值，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。