React组件之间的通信

组件之间的通信方式

• 父向子
• 子向父
• 兄弟间

这里主要介绍前两种

1.父组件向子组件通信（子类用父类的资源）

• 子组件用父组件属性

  eg:这里的likedText与unlikedText

  class LikeButton extends Component {
      render () {
          return (
              <ToggleButton likedText='喜欢' unlikedText='讨厌' />
          );
      }
  };
  
  
  class ToggleButton extends Component {
      constructor () {
          super();
          this.handleClickOnLikeButton = this.handleClickOnLikeButton.bind(this);
          this.state = {isLiked: true};
      }
  
      handleClickOnLikeButton () {
          this.setState({
              isLiked: !this.state.isLiked
          })
      }
  
      render () {
          return (
              <button onClick={this.handleClickOnLikeButton} >    
                  {this.state.isLiked ? this.props.likedText : this.props.unlikedText}
              </button>
          );
      }
  };

  • 子组件用父组件方法

  eg：这里的handleChange方法

   class HelloMessage  extends Component {
      constructor () {
          super();
          this.handleChange = this.handleChange.bind(this);
          this.state = {value: 'Hello Runoob!'};
      }
  
      handleChange (event) {      
          this.setState({value: '菜鸟教程'});
      }
  
      render () {
          return (
              <div>
                  <Content myDataProp = {this.state.value} 
                      that = {this}>
                  </Content>
             </div>
          );
      }
  };
  
  class Content extends Component {
      handleClick () {
          let that = this.props.that;
          that.handleChange();
      }
      render () {
          console.log('updateStateProp',this.props.updateStateProp);
          return(
              <div>
                  <button onClick = {this.handleClick.bind(this)}>点我</button>
                  <h4 style={{fontSize: '20px'}}>{this.props.myDataProp}</h4>
              </div>
          )
      }
  };

  • 这里将父类的this赋给that属性
  • 在子类中将父类的that属性赋给 that变量，this.props.that，再将父类的方法在子类中包装起来handleClick()
  • 这样在子类中就可以直接调用handleClick啦!

2.子组件向父组件通信（父类用子类的资源）

要调用子组件的方法或者属性，需要在调用子组件的时候定义ref属性，且唯一

// 父组件用子组件属性

// 子类
class ButtonComment extends Component {
    constructor () {
        super();
        this.sendSword = this.sendSword.bind(this);
        this.state = {count: 0 };
    }

    sendSword () {
    //这里用回调，setState之后再调用父类的方法进行设置
        this.setState({count:this.state.count + 10}, () => {
            // debugger;

            console.log('this.state.count',this.state.count);
            this.props.getSwordCount2();  //子类调用父类方法的正确写法
            // this.props.getSwordCount2;  //这种写法不会调用的
            // this.props.getSwordCount();  //这种写法会报错的
        }); 
    }

    render () {
       return (
            <button onClick={this.sendSword}>{this.props.buttonName}</button>
       );
    }
};


class ImDaddyComponent extends Component { 
    constructor () {
        super();
        this.sendSwordParent = this.sendSwordParent.bind(this);
        this.getSwordCount = this.getSwordCount.bind(this);
        this.state = {sendCount: 0 };
    }

    sendSwordParent () {
    // 父类调用子类的方法
        this.refs.getSwordButton.sendSword();
        console.log(' this.refs.getSwordButton', this.refs.getSwordButton);
    } 

    getSwordCount () {
        //通过  this.refs.getSwordButton 获取 子类对象 加完之后将加完的结果通知给子类，即，将结果通过 this.refs.getSwordButton 给子类的state.count 设置
        this.setState({sendCount: this.refs.getSwordButton.state.count + 1}, () => {

            this.refs.getSwordButton.setState({
                count: this.refs.getSwordButton.state.count + 1
            });
        });
    }

    render () {
        return (
            <div>
                <ButtonComment ref="getSwordButton" getSwordCount2={this.getSwordCount} buttonName="儿子送宝刀"/>
                <button onClick={this.sendSwordParent}>通过老爸送宝刀</button>
                <p style={{fontSize: '20px'}}>
                    父子俩共送{this.state.sendCount}把宝刀！！！
                </p>
            </div>
        );
    };

};

ReactDOM.render(
        <ImDaddyComponent />,
        document.getElementById('app')
);

【总结】

• 1.子类调用父类方法时，this.props.getSwordCount2()，其中getSwordCount2为父类的属性，调用它要加()，

  this.props.getSwordCount2;  //这种写法不会调用的
  this.props.getSwordCount();  //这种写法会报错的

• 2.父类调用子类方法时

  通过 this.refs.getSwordButton 获取子类，然后.sendSword()，其中sendSword()为子类的方法

• 3.回调的运用

  想子类setSate之后再通过父类改变状态，
  this.setState({}, () => {
调用父类方法
});

• 4.通知子类

  父类改变状态之后，重新找到子类，给子类 setSate,