Question

在热切关注关闭按钮之前，我已经看过以下问题：ReactJS Two components communicating。我的问题正是在当前接受的答案中形成的第三种情况。

我正在使用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>

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

我之前尝试创建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

来自Less Simple Communication的react-training课程有一个很好的例子，说明如何移动动作＆amp;为了避免必须在相关组件之间建立明确的链接，我们侧面说明。

你不需要跳到一个完整的Flux实现来获得这种方法的好处，但它是一个很好的例子，可以引导你到Flux，如果你最终需要它或类似的东西。

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

Answer 2

这将是Flux类型架构的完美用例。

您想要的是某人FooManager能够触发两个组件中的状态更改。或者，事实上，让不同的组件通过Actions触发相互之间的状态变化。

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

在此之后，您可以选择使用Facebook实施Flux或其他无数的。我个人最喜欢的是Reflux

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

2 个答案: