ReactJS：控制孩子和父母的子女状态

我有一个相当简单的问题,我不知道如何用React的单向数据流来解决它.

假设你有一个显示模态的父母中的链接

在模态中,你有一个关闭它的“X”.

我知道我可以通过道具从父母改变模态的状态

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

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

我知道如何关闭模态,但不是两者.不确定如何保持由父母和子女模态共享和控制的状态.

UPDATE

为了尽可能地保持模块化,我认为React的方法是将开/关逻辑存储在模态变量中.

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?

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

>让孩子“受控”,就像一个带有值和onChange属性的表单输入,其中输入的所有者控制输入.
>让孩子“不受控制”,就像没有值的表单输入.

第二选择似乎比前面更快,但就像在React中管理表单输入的集合一样,使用完全控制的组件的优点变得显而易见,因为复杂性的构建和需要在任何时间点上完全描述您的UI. (见FakeRainBrigand的this excellent answer,如果您好奇,为什么受控组件在多数情况下比不受控制的要好)

然而,就像表单输入一样,没有理由不能控制或不控制您的组件.如果用户传递显示和onClose属性(如Austin Greco’s answer),则具有受控模式,父级会完全决定何时显示或隐藏模态.

如果用户没有,您可以跳过使用属性,而是转换为在模态组件上由公共方法管理的内部状态：

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
    }
  },render: function() {
    return (
      <div className={this.state.display ? "show" : "hide"}>
        <a className="close" onClick={this.close}>&times;</a>
      </div>
    )
  }
});

如果您喜欢受控Modal组件的想法,但不想做所有的样板打字,甚至可以实现像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)

所以现在,您可以使用完全由父控制的Modal获得好处,但是您已经删除了一部分样板,创建了将该值设置为false并将其传递给模态的函数.

ReactJS：控制孩子和父母的子女状态

猜你在找的React相关文章