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

在任何人急切按下关闭按钮之前，我已经看了以下问题：。我的问题正是当前公认答案中出现的第三种情况

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

目前，我有以下模式，对应于场景2：

---

文档中说，您可以附加事件来链接两个没有父子关系的组件。但我不知道怎么做。有人能给我一些建议吗？

这将是类型体系结构的完美用例

您希望有人

FooManager

能够触发两个组件中的状态更改。或者，事实上，通过

操作

，让不同的组件触发彼此的状态变化

这个例子完美地说明了您的用例

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

中的课程提供了一个很好的示例，说明了如何从侧面移动动作和状态，以避免在相关组件之间创建显式链接

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

---

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

看起来确实是我需要的。。。我会在接下来的几个小时里试试这个。谢谢：）正是我需要的。我已经在15分钟内实现了这个架构，代码库中几乎没有什么变化，它的工作方式很有魅力：）非常感谢。

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>

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.