React.js子组件中修改父组件状态变量的实现方案

我来帮你解决这个React组件状态传递的问题～你现在遇到的是React单向数据流里的典型场景：子组件没法直接修改父组件的状态，得通过父组件传递过来的回调函数来实现，下面给你具体的修改方案：

核心思路 #

React的状态是自上而下传递的，子组件只能接收父组件的props，不能直接修改父组件的state。所以我们需要让父组件把一个“修改状态的方法”作为props传给子组件，子组件调用这个方法就能触发父组件的状态更新。

修改后的完整代码 #

父组件 DataTable

class DataTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen: false,
    };
    this.view = this.view.bind(this);
    // 新增关闭modal的方法，并绑定this
    this.closeModal = this.closeModal.bind(this);
  }

  view() {
    this.setState({ modalOpen: true });
  }

  // 新增：修改modalOpen状态为false的方法
  closeModal() {
    this.setState({ modalOpen: false });
  }

  render() {
    return (
      <div>
        <button className="mini ui button" onClick={this.view}>
          <i className="user icon"></i> View
        </button>
        {/* 把关闭方法和状态一起传给子组件 */}
        <ModalBody 
          modelStatus={this.state.modalOpen} 
          onCloseModal={this.closeModal} 
        />
      </div>
    )
  }
}

子组件 ModalBody

这里给你两种常见的组件写法参考：

函数组件版本

function ModalBody({ modelStatus, onCloseModal }) {
  return (
    // 根据父组件传递的状态控制modal显示/隐藏
    modelStatus && (
      <div className="modal">
        <div className="modal-content">
          {/* 这里放你的modal内容 */}
          <button onClick={onCloseModal}>关闭弹窗</button>
        </div>
      </div>
    )
  )
}

类组件版本

class ModalBody extends Component {
  render() {
    const { modelStatus, onCloseModal } = this.props;
    return (
      modelStatus && (
        <div className="modal">
          <div className="modal-content">
            {/* 这里放你的modal内容 */}
            <button onClick={onCloseModal}>关闭弹窗</button>
          </div>
        </div>
      )
    )
  }
}

原理说明 #

1. 父组件定义closeModal方法，专门用来修改自身的modalOpen状态
2. 父组件把这个方法通过onCloseModal props传递给子组件
3. 子组件里点击关闭按钮时，调用onCloseModal，本质就是触发父组件的closeModal方法，从而更新父组件的状态
4. 父组件状态更新后会重新渲染，把最新的modalOpen状态传给子组件，子组件就会根据这个状态自动切换显示/隐藏

这种方式完全符合React的单向数据流原则，既能实现需求，又能保持组件间的数据流向清晰～

内容的提问来源于stack exchange，提问作者abu abu