react 组件传值的三种方法

整理 react 组件传值 三种方式

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

子组件：

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

父组件:

  class App extends React.Component{
    render(){
      return(
 
   
 
      )
    }
  }

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

子组件

  class Children extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
    }
    render(){
      return(
 
   父组件的背景色{this.props.bgcolor} // 子组件接收父组件传过来的值 bgcolor
   {this.handerClick(e)}}>改变父组件背景 // 子组件执行函数
 
      )
    }
  }

父组件

  class Father extends Component{
    constructor(props){
      super(props)
      this.state = {
 bgcolor:'pink'
      }
    }
    bgChange(color){
      this.setState({
 bgcolor:color
      })
    }
    render(props){
      
// 给子组件传递的值 color 
 {this.bgChange(color)}} /> 
     // changeColor 子组件的参数=color 当做形参
      
    }
  }

兄弟组件传值（子传给父，父再传给另一个子）

子组件1

  class Children1 extends Component{
    constructor(props){
      super(props);
    }
    handerClick(){
      this.props.changeChild2Color('skyblue') 
      // 改变兄弟组件的颜色 把changeChild2Color的参数传给父
    }
    render(){
      return(
 
   children1
   {this.handerClick(e)}}>改变children2背景
 
      )
    }
  }

子组件2

  class Children2 extends Component{
    constructor(props){
      super(props);
    }
    render(){
      return(
 
 // 从父元素获取自己的背景色
   children2 背景色 {this.props.bgcolor}
   // children2 背景色 skyblue
 
      )
    }
  }  

父组件

class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      child2bgcolor:'pink'
    }
  }
  onchild2bgChange(color){
    this.setState({
      child2bgcolor:color
    })
  }
  render(props){
    
      {this.onchild2bgChange(color)}} />
      
    
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。