简单教你React父子组件间平级组件间传值

￡神魔★判官ぃ 2021-09-16 13:42 380阅读 0赞

国庆充电特辑：

堵车堵死，废话不多说直接上菜。

1.父组件对子组件传值 利用props属性传值

class Component extends React.Component {
        constructor (props) {
          super(props);
        }
        render() {
          return (
            <div>
                <h1>I am  {this.props.name}</h1>
            </div>
          );
        }
    }
    
    ReactDOM.render(
      <div>
        <Component name='YUSIRXIAER'></Component>
        <h1>hello world!!!</h1>
      </div>,
      document.getElementById('app')
    );

效果如图 爸爸的凝视，会了没（手动滑稽）

![70][]

2.子组件对父组件传值 简单来说就是利用回调来完成，比如下面例子，子组件来改变父组件的颜色

// 处理父子组件间传值
    class Child extends React.Component {
        constructor (props) {
          super(props);
    
        }
        handleClick() {
          this.props.colorChange('yellow')
        }
    
        render() {
          return (
            <div>
                <h1>父组件的值  {this.props.bgColor}</h1>
                <button onClick={(e) => this.handleClick(e)}>改变父组件颜色</button>
            </div>
          );
        }
    }
    
    class Father extends React.Component {
        constructor (props) {
          super(props);
          this.state={
            bgColor: '#999'
          };
        }
        onBgColorChange(color) {
          this.setState({
            bgColor: color
          })
        }
        render() {
          return (
            <div style={
       {background:this.state.bgColor}}>
              <Child bgColor={this.state.bgColor} colorChange={(color)=>{this.onBgColorChange(color)}}></Child>
              {/* 子组件像父组件传值，设置回调 */}
            </div>
          );
        }
    }
    ReactDOM.render(
      <div>
        <Father></Father>
      </div>,
      document.getElementById('app')
    );

看效果

![70 1][]

![70 2][]

3.同一父组件下平级组件间传值 ，简单一句话 子组件先传给父组件，父组件再传给那个子组件

// 处理平级组件间传值 ，先传给父组件，父组件再传给另一个组件
    class Child1 extends React.Component {
        constructor (props) {
          super(props);
    
        }
        handleClick() {
          this.props.changeChild2Color('yellow')
        }
    
        render() {
          return (
            <div>
                <h1>Child1：  {this.props.bgColor}</h1>
                <button onClick={(e) => this.handleClick(e)}>向Child2传值，改变其颜色</button>
            </div>
          );
        }
    }
    class Child2 extends React.Component {
        constructor (props) {
          super(props);
        }
    
        render() {
          return (
            <div style={
       {background:this.props.bgColor}}>
                <h1>Child2：  {this.props.bgColor}</h1>
            </div>
          );
        }
    }
    class Father extends React.Component {
        constructor (props) {
          super(props);
          this.state={
            child2BgColor: '#999'
          };
        }
        onChild2BgColorChange(color) {
          this.setState({
            child2BgColor: color
          })
        }
        render() {
          return (
            <div>
              {/* 平级组件间传值*/}
              <Child1 changeChild2Color={(color)=>{this.onChild2BgColorChange(color)}}></Child1>
              <Child2 bgColor={this.state.child2BgColor}></Child2>
            </div>
          );
        }
    }
    ReactDOM.render(
      <div>
        <Father></Father>
      </div>,
      document.getElementById('app')
    );

看效果

![70 3][]

![70 4][]

学会了吧，回见，继续堵车！！！

[70]: /images/20210813/a53cfa7e58924ef59b67862215e3b9e1.png
[70 1]: /images/20210813/3509364542724fb8a09a63e164ac58e0.png
[70 2]: /images/20210813/53337eef56b04f90a677083b132d78c2.png
[70 3]: /images/20210813/9b408350552243c8983c05f12daf4be5.png
[70 4]: /images/20210813/18c546837576435794073bba63e839d6.png