React中父子组件通信

在React项目中，一个页面会被分割成很多个组件，组件之间形成嵌套关系，所以组件之间的通信是非常重要的环节。

除了使用状态管理工具（如redux）以外，我们来看看如何实现父子组件通信的。

一、父传给子

• 父组件通过属性=值的形式来传递给子组件数据。
• 子组件通过props参数获取父组件传递过来的数据。

如下代码,父组件中定义一个counter，并且传递给子组件，子组件在props中获取到counter组件，并且展示出来。

import React, { PureComponent } from "react";
​
class Child extends PureComponent {
  render() {
    const { counter } = this.props;
    return (
      <div>
        <h2>我是孩子组件，这是父组件传来的：{counter}</h2>
      </div>
    );
  }
}
​
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      counter: 100,
    };
  }
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h2>我是父亲组件,我定义了counter：{counter}</h2>
        <Child counter={counter}></Child>
      </div>
    );
  }
}

二、子传给父

• 在React中同样是通过props传递消息，只是让父组件给子组件传递一个回调函数，在子组件中调用这个函数即可。

这里我们用一个案例来说明，将按钮封装在子组件中，通过点击事件，将内容传递给父组件，修改counter的值；

import React, { PureComponent } from "react";
​
class Child extends PureComponent {
  changeCounter(type, num) {
    this.props.changeClick(type, num);
  }
  render() {
    const { counter } = this.props;
    return (
      <div>
        <h2>我是孩子组件，这是父组件传来的：{counter}</h2>
        <button onClick={() => this.changeCounter("+", 5)}>+5</button>
        <button onClick={() => this.changeCounter("-", 3)}>-3</button>
      </div>
    );
  }
}
​
export class App extends PureComponent {
  constructor() {
    super();
    this.state = {
      counter: 100,
    };
  }
  changeCounter(type, num) {
    if (type === "+") {
      this.setState({
        counter: this.state.counter + num,
      });
    } else if (type === "-") {
      this.setState({
        counter: this.state.counter - num,
      });
    }
  }
  render() {
    const { counter } = this.state;
    return (
      <div>
        <h2>我是父亲组件,我定义了counter：{counter}</h2>
        <Child
          counter={counter}
          changeClick={(type, num) => this.changeCounter(type, num)}
        ></Child>
      </div>
    );
  }
}