ReactJS：从 child 和 parent 控制 child 状态

Question

我有一个相当简单的问题，我不确定如何使用 React 的单向数据流来解决它。

假设您在 parent 中有一个 link 显示模态

在模式中，您有一个 "X" 可以关闭它。

我知道我可以通过 props

从 parent 更改模态的状态

// In the parent
<Modal display={this.state.showModal} />

// In the modal
<div className={this.props.display ? "show" : "hide"}>
  <a className="close">&times;</a>
  ...
</div>

而且我知道如何关闭模式，但不是两者都知道。不确定如何保持由 parent 和 child 模式共享和控制的状态。

更新

为了尽可能保持模块化，我认为 React 的方式是将 open/close 逻辑存储在模态变量中。

var ParentThing = React.createClass({
  ...
  render (
    <Modal /> // How can I call this.open in the modal from here?
  )
});

var Modal = React.createClass({
  setInitialState: function() {
    return {
      display: false
    }
  },
  close: function() {
    this.setState({ display: false });
  },
  open: function() {
    this.setState({ display: true });
  },
  render: function() {
    return (
      <div className={this.state.display ? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

我看到了这个方法，但似乎比我在这里需要做的要多一些。 Reactjs: how to modify child state or props from parent?

Answer 1

您可以将回调作为 prop 传递给子组件：

// In the parent
<Modal display={this.state.showModal} onClose={this.closeModal} />

// In the modal
<div className={this.props.display ? "show" : "hide"}>
  <a className="close" onClick={this.props.onClose}>&times;</a>
  ...
</div>

那么当你点击child上的关闭按钮时，它会调用parent的函数

Answer 2

在 React 中有两种方法可以处理这种事情：

使 child "controlled," 就像带有 value 和 onChange 属性的表单输入一样，其中 owner的输入控制输入。
使 child "uncontrolled," 就像没有 value 的表单输入一样。

第二个选择看起来更快，但就像在 React 中管理表单输入的集合一样，使用完全受控组件的优势变得 apparent 随着复杂性的增加和需要完整描述您的 UI 在任何点和时间增加。（如果您想知道为什么在大多数情况下受控组件比不受控组件更好，请参阅 FakeRainBrigand 的。）

但是，就像表单输入一样，没有理由无法控制您的组件或不受控制。如果用户传递 display 和 onClose 属性，比如，你有一个受控模式，而 parent 完全决定何时显示或隐藏模态。

如果用户不，您可以跳过使用属性，而是委托给由模态组件上的public方法管理的内部状态：

var ParentThing = React.createClass({
  ...
  render: function() {
    return <Modal ref="modal" />;
  },

  handleSomeClick: function() {
    this.refs.modal.open();
  }
});

var Modal = React.createClass({
  setInitialState: function() {
    return {
      display: false
    }
  },
  close: function() {
    this.setState({ display: false });
  },
  open: function() {
    this.setState({ display: true });
  },
  render: function() {
    return (
      <div className={this.state.display ? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

如果您喜欢受控 Modal 组件的想法，但不想进行所有样板输入，您甚至可以实现类似 valueLink 属性的东西用于模态框以简化此模式。

var ParentThing = React.createClass({
  ...
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function() {
    return { showModal: false };
  },

  render: function() {
    return <Modal displayLink={this.linkState("showModal")} />;
  },

  handleSomeClick: function() {
    this.setState({showModal: true});
  }
});

var Modal = React.createClass({
  close: function() {
    this.props.displayLink.requestChange(false);
  },

  render: function() {
    return (
      <div className={this.props.displayLink.value? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

^{（参见my blog post on creating custom components that work with linkState/valueLink for more info。）}

所以现在你得到了使用完全 parent-controlled 模式的好处，但是你已经删除了围绕创建一个将值设置为 false 并将其传递给的函数的一部分样板文件模态

ReactJS：从 child 和 parent 控制 child 状态

ReactJS: Control a child state from the child and the parent

reactjs

react-jsx