react 组件传值的三种方法

 更新时间:2019年06月03日 10:31:46   作者:阿西瓜  
这篇文章主要介绍了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 兄弟组件如何调用对方的方法示例

    react 兄弟组件如何调用对方的方法示例

    这篇文章主要介绍了react 兄弟组件如何调用对方的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • webpack 2.x配置reactjs基本开发环境详解

    webpack 2.x配置reactjs基本开发环境详解

    本篇文章主要介绍了webpack 2.x配置reactjs基本开发环境详解,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • React html中使用react的两种方式

    React html中使用react的两种方式

    这篇文章主要介绍了React html中使用react的两种方式,本文给大家提到了React pwa的配置代码,给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-04-04
  • react如何用懒加载减少首屏加载时间

    react如何用懒加载减少首屏加载时间

    这篇文章主要介绍了react如何利用懒加载减少首屏加载时间,帮助大家更好的理解和学习使用react,感兴趣的朋友可以了解下
    2021-04-04
  • React 高阶组件入门介绍

    React 高阶组件入门介绍

    本篇文章主要介绍了React高阶组件入门介绍,这篇文章中我们详细的介绍了什么是高阶组件,如何使用高阶组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react实现一个优雅的图片占位模块组件详解

    react实现一个优雅的图片占位模块组件详解

    这篇文章主要给大家介绍了关于react如何实现一个还算优雅的占位模块图片组件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 详解一个基于react+webpack的多页面应用配置

    详解一个基于react+webpack的多页面应用配置

    这篇文章主要介绍了详解一个基于react+webpack的多页面应用配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • 深入理解react-router 路由的实现原理

    深入理解react-router 路由的实现原理

    这篇文章主要介绍了深入理解react-router 路由的实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 使用React-Router实现前端路由鉴权的示例代码

    使用React-Router实现前端路由鉴权的示例代码

    这篇文章主要介绍了使用React-Router实现前端路由鉴权的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • React State状态与生命周期的实现方法

    React State状态与生命周期的实现方法

    这篇文章主要介绍了React State状态与生命周期的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03

最新评论