React 父子组件传值的方式

React 父子组件传值的方式

1. 父传子

由于React是单向数据流，因此造成了当前组件的state以props形式流动时，只能流向组件树中比自己层级更低的组件。 比如在父-子组件这种嵌套关系中，只能由父组件传 props 给子组件，而不能反过来。

子组件代码

function Child(props) {
  return (
    <div className="child">
      <p>{`子组件接收父组件的文本内容是：[${props.fatherText}]`}</p>
    </div>
  );
}`

父组件代码

class Father extends React.Component {
  // 初始化父组件的 state
  state = {
    text: "初始化的父组件的文本"
  };
  // 按钮的监听函数，用于更新 text 值， 子组件中的props也会改变
  changeText = () => {
    this.setState({
      text: "改变后的父组件文本"
    });
  };

  // 渲染父组件
  render() {
    return (
      <div className="father">
        <button onClick={this.changeText}>
          **点击修改父组件传入子组件的文本**
        </button>
        {/* 将state中的内容，通过props传入子组件 */}
        <Child fatherText={this.state.text} />
      </div>
    );
  }
}

2. 子传父

因为props流动是单向的，所以父组件传递给子组件的是一个绑定了自身上下文的函数，那么子组件在调用该函数时，就可以将想要交给父组件的数据以函数入参的形式给出去，以此来间接地实现数据从子组件到父组件的流动。

子组件

class Child extends React.Component {

  // 初始化子组件的 state  
  state = {
    text: '子组件的文本'
  }
  // 子组件的按钮监听函数
  changeText = () => {
    // changeText 中，调用了父组件传入的 changeFatherText 方法
    this.props.changeFatherText(this.state.text)
  }
  render() {
    return (
      <div className="child">
        {/* 注意这里把修改父组件文本的动作放在了 Child 里 */}
        <button onClick={this.changeText}>
          点击更新父组件的文本
        </button>
      </div>
    );
  }
}

父组件

class Father extends React.Component {
  // 初始化父组件的 state
  state = {
    text: "初始化的父组件的文本"
  };
  // 这个方法会作为 props 传给子组件，用于更新父组件 text 值。newText 正是开放给子组件的数据通信入口
  changeText = (newText) => {
    this.setState({
      text: newText
    });
  };
  // 渲染父组件
  render() {
    return (
      <div className="father">
        <p>{`父组件的文本内容是：[${this.state.text}]`}</p>
        {/* 引入子组件，并通过 props 中下发可传参的函数 实现子-父通信 */}
        <Child
		  {`通过此方法实现子传父`}
          changeFatherText={this.changeText}
        />
      </div>
    );
  }