react父子组件之间的通信方式--最完整的Demo、最简洁的方式（子向父，父向子）

• react组件中，比如table表单跟modal之间的交互，经常涉及到参数和方法等等之间的的交互。例如下图

组件：Ant Design of React

父组件

import React from 'react';

// 加：父组件，减：子组件
// 父组件向子组件传递值，子组件向父组件传递值
export default class ProductList extends React.PureComponent {
     
  constructor(props: object) {
     
    super(props);
    this.state = {
     
      value: 1,
    };
  }

  clickParent = () => {
     
    // @ts-ignore
    let {
      value } = this.state;
    value++;
    this.setState({
     
      value,
    });
  };

  // 调用子组件的方法
  clickMeChild = () => {
     
    this.childComponent.clickChild();
  };

  // 接收子组件传递过来的值
  receiveChild = (childVlaue) => {
     
    this.setState({
     childVlaue});
  };

  render() {
     
    const {
      value, childVlaue } = this.state;
    // 传递给子组件的方法和参数
    const childProps = {
     
      value,
      clickParent: this.clickParent,
      parent: this,
    };
    return (<div>
      <h1>父组件</h1>
      parent num:{
     value}
      <br/>
      receive child value: {
     childVlaue}
      <br/>
      <button onClick={
     this.clickParent}>点击父组件-加</button>
      <button onClick={
     this.clickMeChild}>点击子组件-减</button>

      <hr/>
      <Child {
     ...childProps} onRef={
     ref => {
     
      this.childComponent = ref;}} />
    </div>)
  }
}

class Child extends React.PureComponent {
     
  constructor(props: object) {
     
    super(props);
    this.state = {
     
      childValue: 100,
    };
  }

  componentDidMount() {
     
    // @ts-ignore
    const {
      onRef } = this.props;
    onRef(this);
  }

  clickChild = () => {
     
    // @ts-ignore
    let {
      childValue } = this.state;
    childValue--;
    this.setState({
     
      childValue,
    });
  };

  // 向父组件传值
  sendParent = () => {
     
    this.props.parent.receiveChild(this.state.childValue)
  };

  render() {
     
    // @ts-ignore
    const {
      value, clickParent } = this.props;
    const {
      childValue } = this.state;
    return (<div>
      <h1>子组件</h1>
      child receive parent num : {
     value}
      <br/>
      child value:{
     childValue}
      <br/>
      <button onClick={
     clickParent}>点击父组件的方法-加</button>
      <br/>
      <button onClick={
     this.clickChild}>点击子组件-减</button>
      <br/>
      <button onClick={
     this.sendParent}>向父组件传递值</button>

    </div>)
  }
}

• 效果图

• 父组件调用子组件方法二

父组件获取整个子组件，父组件在调用子组件时，通过ref属性，拿到整个子组件
同理，子组件调用父组件，通过传入this，也能获取整个父组件。从而进行调用方法

class parent extends React.PureComponent{
     

  // 调用子组件的方法
  sendChildMethod = () => {
     
    console.log(this);
    this.refs['child'].clickChild();
  };

render(){
     

return (<div>
      <button onClick={
     this.sendChildMethod}>
      点击子组件-减</button>
      <Child {
     ...childProps} ref="child" />
</div>)
}

}