javascript - 在 React.js 中编辑丰富的数据结构

Question

我正在尝试为数据结构创建一个简单的基于网格的编辑器，但我在使用 React.js 时遇到了一些概念性问题。他们的文档对此没有太大帮助，所以我希望这里有人可以提供帮助。

首先，将状态从外部组件传输到内部组件的正确方法是什么？内部组件的状态变化是否可能“冒泡”到外部组件？

其次，两个独立的组件是否可以共享数据，以便一个组件的突变在另一个组件中可见？

下面是我想做的事情的简化示例 (JSFiddle version):

我有一个 company 对象，其中包含一个 employee 对象数组。我想在可编辑的网格中布置 employee 列表。当我单击该按钮时，我想查看生成的 company 对象，以及任何变更(写入控制台)。

/** @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')
);

Answer 1

我认为这是目前 React 中文档最少的部分。建议的组件间通信方式是在父子通信时简单地设置 props，并在子与父通信时通过 props 传递回调。

当您觉得要在兄弟组件之间共享数据时，这意味着应该有一个父组件管理状态并将其传递给两个组件。大多数时候，您的状态应该位于组件层次结构的顶部附近，并且每条信息应该位于(至多)一个组件的状态中，而不是更多。

有关此的更多信息，请参阅 Pete Hunt 的博客文章， Thinking in React .

---

考虑到这一点，我更新了您的 fiddle .

我已经改变了Grid这样它就不会维护自己的状态，而是始终显示通过其 Prop 传递的数据，并调用 onCellChange当它想请求从它的父级改变数据时从它的 Prop 。 (Grid 组件将期望其父级使用修改后的数据更新网格的 data 属性。如果父级拒绝(可能是因为数据验证失败或类似原因)，您最终会得到一个只读网格。)

您还会注意到我创建了一个新的 Editor组件来包装网格及其同级按钮。 Editor组件现在基本上管理整个页面。在真实的应用程序中，网格的内容可能会在其他地方需要，因此状态会被移到更高的位置。我删除了你的 Button组件，因为它没有做太多超出原生的 <button>标签;我离开了Cell但它也可以删除 -- Row可以轻松使用<input>直接标记。

希望这是有道理的。如果有任何不清楚的地方，请随时询问。 #reactjs IRC room里面平时也有人在身边如果你想就此进行更多讨论。