React中父子传参以及兄弟传参

React中父子传参以及兄弟传参

今天遇到了这个react中父子传参的问题，所以就来研究一下。话不多说，直奔主题！

父传子(通过props属性)

直接上代码！

父组件

import React from 'react';
import Children from './Children';
class Father extends React.Component{
    constructor(){
        super();

    }
    render(){
        return(
            <div>
                {/* 我们在这里引入子组件 并声明一个属性str  给他传一个hello */}
                <Children str='hello'></Children>
            </div>
        )
    }

}
export default Father;

子组件

import React from 'react';
class Children extends React.Component{
    constructor(){
        super()
    }

    render(){
        return(
            <div>
                {/* 子组件通过props 这个属性来接受父组件传过来的str */}
                {this.props.str}
            </div>
        )
    }

}
export default Children;

子传父（refs）

父组件

import React from 'react';
import Children from './Children';
class Father extends React.Component{
    constructor(){
        super();
		this.state={
		arr:[1,2,3]
		}
    }
    render(){
        return(
            <div>
                <Children text={this.state.arr} ref="son"></Children>
                <p>{this.refs.son.state.value}</p>
            </div>
        )
    }

}
export default Father;

子组件

import React from 'react';
class Children extends React.Component{
    constructor(){
        super();
        this.state={
        value:0
        }
    }

    render(){
        return(
            <div>
            	{this.props.arr}
                <input type="text" value=={this.state.value} onChange={(e)=>{this.setState(
                value:e.target.value
                )}
               }}/>
            </div>
        )
    }

}
export default Children;

使用ref的好处就是 父组件这边refs来得，孙子的值都可以 一直点下去！

子传父（回调函数）

父组件

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

子组件

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>
    )
  }
}

兄弟传参（子传给父，父再传给另一个子）

子组件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>
    )
  }
}

父组件

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

子组件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>
    )
  }
}