将组件的引用传递给ReactJS中的另一个组件

Question

在任何人急切地按下关闭按钮之前，我已经看过以下问题： ReactJS两个组件进行通信 。 我的问题恰恰是当前公认答案中出现的第三种情况。

我正在使用ReactJS用两个组件来构建东西。 出于HTML原因（和演示文稿），我希望我的两个组件位于页面的两个不同位置。

目前，我有以下与场景＃2相对应的模式：

FooForm = React.createClass({
    ...
});

FooList = React.createClass({
    ...
});

FooManager = React.createClass({
    ...

    render: function () {
        return (
            <div>
                <FooForm ref="form" manager={this} />
                <FooList ref="list" />
            </div>
        );
    }
});

React.render(
    <FooManager someProp={value} />,
    document.getElementById('foo')
);

这给出了类似的内容：

<div id="foo">
     <form>Form generated with the render of FooForm</form>
     <ul>List generated with the render of FooList</ul>
</div>

但是，我想有这样的事情：

<div id="fooform">
     <form>Form generated with the render of FooForm</form>
</div>
<!-- Some HTML + other controls. Whatever I want in fact -->
<div>...</div>
<div id="foolist">
    <ul>List generated with the render of FooList</ul>
</div>

这里的问题是： 如何在每个组件中保留引用？ 或至少链接表单->列表？

我尝试在之前创建FooList并将引用传递给当前管理器，但收到以下警告/错误：

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref.

该文档说，您可以附加事件来链接两个没有父子关系的组件。 但是我不知道如何。 有人可以给我一些指示吗？

Answer 1

来自反应训练的 “ 不太简单的交流”课程很好地说明了如何横向移动动作和状态，而不必在相关组件之间创建显式链接。

您无需跳入完整的Flux实施即可获得这种方法的好处，但是如果您最终需要Flux或类似的东西，这是一个引导您进入Flux的好例子。

请注意，这需要您根据更改状态为组件之间的关系建模，而不是显式地将引用传递给组件实例（如上所述）或绑定到管理状态的组件的回调。

Answer 2

这将是Flux类型体系结构的理想用例。

您想要的是某人FooManager能够触发两个组件中的状态更改。 或者，实际上，让不同的组件通过Actions触发彼此的状态更改。

Flux Todo-App教程完美地说明了您的用例！

之后，您将可以选择使用Facebook的Flux实现或其他专精的实现。 我个人最喜欢的是Reflux