我有一个相当简单的问题,我不确定如何使用React的单向数据流来解决它。
假设您在父级中有一个显示模式的链接
在模式中,您有一个“ X”将其关闭。
我知道我可以通过道具从父母那里改变模态的状态
// In the parent <Modal display={this.state.showModal} /> // In the modal <div className={this.props.display ? "show" : "hide"}> <a className="close">×</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}>×</a> </div> ) } });
我看到了这种方法,但似乎比这里需要做的更多。
在React中有两种方法可以处理这种事情:
value
onChange
第二种选择似乎更快,但是就像在React中管理一组表单输入一样,随着构建复杂性以及在 任何 时间点和 任何 时间完全描述UI的需求,使用完全受控组件的优势变得显而易见。
但是,就像表单输入一样,没有理由不能控制_或_不受控制。如果用户通过display和onClose属性,例如AustinGreco的answer,则您具有受控模态,并且父级完全决定何时显示或隐藏模态。
display
onClose
如果用户 不 使用,则可以跳过使用属性,而是委托给模态组件上由公共方法管理的内部状态:
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}>×</a> </div> ) } });
如果您喜欢受控Modal组件的想法,但又不想进行所有样板输入,则您甚至可以valueLink为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}>×</a> </div> ) } });
(有关更多信息,linkState``valueLink请参阅我的博客文章有关创建与/ 一起使用的自定义组件的信息。)
linkState``valueLink
因此,现在您可以获得使用完全由父级控制的模态的好处,但是您删除了创建可将值设置为false并将其传递给模态的函数的部分样板。
false