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/

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

Answer 2

我遇到了很多因为制作组件的副作用很少。

我不得不在层次结构中向下传递4-5级，因为实际状态是最高级别（容器）。

以下是一个例子：

＆＃13;

<ProjectContainer>
  <ProjectComponent onProjectChange onProjectTaskChange onCommentChange>
    <ProjectTasksComponent onProjectTaskChange onCommentChange>
      <ProjectTaskComponent onProjectTaskChange onCommentChange>
        <ProjectTaskCommentsComponent onCommentChange>
          <ProjectTaskCommentComponent onCommentChange>

＆＃13;

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

2 个答案: