ReactJS数据流具有深层次数据

Question

我正在探索ReactJS并试图掌握核心概念.我开始拼接我正在处理的应用程序的原型,该应用程序具有以下层次结构

• 顾客
  • 地点
    • 地址
    • 往来

我正在处理的页面将是客户及其所有相关子项的输入表单.这些部分中的每一部分都有一些文本输入来存放数据,因此它们看起来像是容纳组件层次结构的自然场所.

从我读过的关于ReactJS的所有内容中,如果你要管理状态,你应该在所有控件的共同祖先中这样做.这意味着孩子的任何变化都应该将事件冒充到州的管理者处理变化.然后应该更新状态,并且将重新呈现任何更改.这在简单的场景中是有意义的,但这使我进入了稍微复杂的层次结构.

• 如果在多个地址中的某个地址发生变化,我是否应该将该事件冒泡到该位置然后再向客户冒泡？
• 如果是这样,告诉状态哪个特定地址发生变化的最佳方法是什么？
• 如果你必须通过层次结构的每个级别调用,那么传播一个简单的更改会不会产生很多额外的样板？
• 我应该在每个文本框中附加onChange事件,还是应该等到我提交表单来收集数据？

React谈到ReactLink(https://facebook.github.io/react/docs/two-way-binding-helpers.html)作为一种管理更复杂的数据绑定的方法,但没有给出一个很好的例子来说明如何使用更大的层次结构来管理它.此外,它声明大多数应用程序不应该需要这个.好吧,这个应用程序确实不复杂,只有几个嵌套控件具有共享状态.这就是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/

如果有人有任何改进，我很高兴听到他们的声音！