javascript - 具有深层次数据的 ReactJS 数据流

Question

我正在探索 ReactJS 并试图掌握核心概念。我开始拼凑我正在处理的应用程序的原型(prototype)，它具有以下层次结构

• 客户
  • 地点
    • 地址
    • 联系人

我正在处理的页面将是客户及其所有相关子项的输入表单。这些部分中的每一个都会有一些文本输入来容纳数据，因此它们似乎是容纳组件层次结构的自然位置。

从我读到的关于 ReactJS 的所有内容来看，如果你要管理状态，你应该在所有控件的共同祖先中进行。这意味着 child 的任何变化都应该将事件冒泡到状态的守护者来处理变化。这应该会更新状态，任何更改都将被重新呈现。这在简单的场景中是有意义的，但这让我想到了稍微复杂的层次结构。

• 如果多个地址之一发生变化，我是否应该将该事件向上传递到该位置，然后再传递给客户？
• 如果是这样，告诉州政府哪个具体地址发生变化的最佳方式是什么？
• 如果您必须调用层次结构的每个级别，是否会产生大量额外的样板来传播简单的更改？
• 我应该附加到每个文本框上的 onChange 事件，还是应该等到提交表单后再收集数据？

React 谈论 ReactLink ( https://facebook.github.io/react/docs/two-way-binding-helpers.html ) 作为管理更复杂数据绑定(bind)的一种方式，但没有给出一个很好的例子来说明如何使用更大的层次结构来管理它。此外，它指出大多数应用程序不需要这个。好吧，这个应用程序真的并不复杂，只是几个具有共享状态的嵌套控件。这就是 React 应该大放异彩的地方，所以我不会立即跳到边缘案例解决方案。

Answer 1

我最近遇到了同样的难题——React 文档在这方面不是很完整。这是我发现的一种工作方式:

var Parent = React.createClass({
    mixins: [React.addons.LinkedStateMixin],

    getInitialState: function() {
        return {
            p: 'Hello World',
            q: 'Click me if I\'m pink!',
            r: 'A'
        };
    },
    render: function() {
        return (
            <div className='parent'>
                <p>
                    <h3>Parent</h3>
                    <tt>
                        p: {this.state.p}<br />
                        q: {this.state.q}<br />
                        r: {this.state.r}
                    </tt>
                </p>

                <Child q = {this.linkState('q')}
                       p = {this.linkState('p')}
                       r = {this.linkState('r')} />
            </div>
        );
    }
});
var Child = React.createClass({
    clicked: function() {
        this.props.q.requestChange("Thank you :)");
    },
    render: function() {
        return (
            <div className='child'>
                <h3>Child</h3>

                <p>
                    <input valueLink={this.props.p} />
                </p>

                <p>
                    <tt onClick={this.clicked}>
                        {this.props.q.value}
                    </tt>
                </p>

                <select valueLink={this.props.r}>
                    <option value={'A'}>A</option>
                    <option value={'B'}>B</option>
                </select>
            </div>
        );
    }
});

React.render(<Parent />, document.body)

https://jsfiddle.net/cachvico/p81s75x5/

如果有人有任何改进，我很乐意听到他们的意见!