我正在尝试为数据结构创建一个简单的基于网格的编辑器,而React.js遇到了一些概念上的问题。他们的文档在这方面不是很有帮助,所以我希望这里的人能为您提供帮助。
首先,将状态从外部组件传递到内部组件的正确方法是什么?内部组件是否可能“冒泡”到外部组件发生状态变化?
其次,两个单独的组件可以共享数据,以便一个组件中的一个突变在另一个组件中可见吗?
下面是我想做的事情的简化示例(JSFiddle版本):
我有一个company包含employee对象数组的对象。我想将employee列表布置在可编辑的网格中。当我单击按钮时,我想查看生成的company对象以及任何突变(写入控制台)。
company
employee
/** @jsx React.DOM */ var Cell = React.createClass({ getInitialState: function () { return {data: ""}; }, componentWillMount: function () { this.setState({data: this.props.data}); }, onChange: function (evt) { console.log(this.state, evt.target.value); this.setState({data: evt.target.value}); }, render: function () { var data = this.props.data; return <input value={this.state.data} onChange={this.onChange} /> } }); var Row = React.createClass({ render: function () { return (<div className="row"> <Cell data={this.props.data.name} /> <Cell data={this.props.data.location} /> <Cell data={this.props.data.phone} /> </div>); } }); var Grid = React.createClass({ render: function () { var rows = this.props.data.map(function (rowData, index) { return <Row key={index} data={rowData}>Row</Row>; }); return <div className="table">{rows}</div>; } }); var Button = React.createClass({ getInitialState: function () { return {data: {}} }, componentWillMount: function () { this.setState({data: this.props.data}); }, onClick: function () { console.log(this.state); }, render: function () { return <button onClick={this.onClick}>Update</button>; } }); var company = { name: "Innotech", employees: [ {id: "1", name: "Peter", location: "IT", phone: "555-1212"}, {id: "2", name: "Samir", location: "IT", phone: "555-1213"}, {id: "3", name: "Milton", location: "loading dock", phone: "none"} ] }; React.renderComponent( <div><Grid data={company.employees} /><Button data={company} /></div>, document.getElementById('employees') );
我认为这是React目前记录不足的部分。在组件之间进行通信的建议方法是,在从父级到子级通信时,简单地设置props;从子级到父级通信时,通过props传递回调。
当您感觉要在同级组件之间共享数据时,这意味着应该有一个父组件来管理状态并将其传递给两个组件。在大多数情况下,您的状态应该位于组件层次结构的顶部附近,并且每条信息都应该(最多)处于一个组件的状态,而不是更多。
有关此内容的更多信息,请参阅Pete Hunt的博客文章“ React中的思考” 。
考虑到这一点,我更新了您的小提琴。
我进行了更改Grid,以使其不保持其自身状态,而是始终显示通过其prop传递的数据,并onCellChange在它想要从其父级 请求 更改数据时从其props进行调用。(Grid组件将期望其父级data使用修改后的数据来更新网格的属性。如果父级拒绝(可能是由于数据验证失败或类似原因),则最终将获得只读网格。)
Grid
onCellChange
data
您还将注意到,我创建了一个新Editor组件来包装网格及其同级按钮。Editor现在,该组件实际上可以管理整个页面。在实际的应用程序中,很可能在其他地方需要网格的内容,因此状态会更高。我删除了您的Button组件,因为它在本机<button>标记之外的工作不多;我离开了,Cell但也可以将其删除- Row可以轻松地<input>直接使用标签。
Editor
Button
<button>
Cell
Row
<input>
希望这是有道理的。随时询问是否有不清楚的地方。如果您想更多地谈论这方面的信息,通常在#reactjs IRC室中还会有人。