欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react 组件传值的三种方法

程序员文章站 2023-12-18 16:54:04
整理 react 组件传值 三种方式 父组件向子组件传值(通过props传值) 子组件: class children extends component...

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

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

上一篇:

下一篇: