小编典典

ReactJS:从子代和父代控制子代状态

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>

而且我知道如何关闭模式,但不能同时关闭两者。不知道如何保持父模态和子模态共享和可控制的状态。

更新

为了尽量保持模块化,我认为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>
    )
  }
});

我看到了这种方法,但似乎比这里需要做的更多。


阅读 337

收藏
2020-07-22

共1个答案

小编典典

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

  1. 使孩子“受控制”,就像带有valueonChange属性的表单输入一样,其中输入的 所有者 控制输入​​。
  2. 使孩子“不受控制”,就像不带的表单输入一样value

第二种选择似乎更快,但是就像在React中管理一组表单输入一样,随着构建复杂性以及在 任何 时间点和 任何
时间完全描述UI的需求,使用完全受控组件的优势变得显而易见。

但是,就像表单输入一样,没有理由不能控制_或_不受控制。如果用户通过displayonClose属性,例如AustinGreco的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
    }
  },
  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为Modal 实现类似属性的功能以简化此模式。

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>
    )
  }
});

(有关更多信息linkState``valueLink请参阅我的博客文章有关创建与/
一起使用的自定义组件的信息。)

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

2020-07-22