react 组件传值的三种方法

前端  /  管理员 发布于 4年前   780

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

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

您可能感兴趣的文章:

• Vue和React组件之间的传值方式详解
• React父子组件间的传值的方法
• React 子组件向父组件传值的方法
• react-router实现跳转传值的方法示例
• react写一个select组件的实现代码
• react的滑动图片验证码组件的示例代码
• React传值 组件传值 之间的关系详解