Question

ReactJS中是否有办法让某个组件找出它的父母是谁？

编辑1：无论这样做的优点如何，有办法吗？

我还没有找到一种React方法来实现这一点 - 从我所看到的，我的想法是将回调传递给来自父级的子进程，并且子进程调用回调 - 不知道这个事实是回调实际上是在父母身上。

我试过设置一个＆＃34;所有者＆＃34;财产，这个想法似乎有效，但我想知道什么是最好的方法？

e.g。

<Parent>
  <Child owner={this}/>
</Parent>

然后在子组件中，我可以owner.method，它似乎工作正常。我知道这不是一个真正的父/子关系，但是我在我的测试中找到的最接近。

有些人可能会说回调是一种更干净的方式，但是对于某些事情（例如RadioButtonGroup和RadioButton）的父/子关系看起来很自然，并且在我看来会因为知道这种关系而受益。

编辑2：所以它不可能？

我不喜欢它不受支持的想法 HTML可以用零javascript标记 - 它隐含着，默认功能 - 父母需要一些元素 - 它们被定义为其他元素的子元素（例如ul和li）。这个不能在JSX中发生，因为如果之间存在交互元素 - 有是绑定的javascript事件组件在一起 - 每次使用它们。设计师无法做到简单地写HTML就像语法一样 - 有人必须介入并放一些那里的javascript绑定 - 然后进行维护更难。我认为这个想法对覆盖默认行为有意义，但是应支持的默认行为。默认情况会要求了解您的父母或您的所有者是谁。

Answer 1

不这样做有很多好处，主要有两个：可重用性和封装。

TL; DR你可能不想这样做。

让我们说我们的RadioButton有这个公共界面：

<RadioButton active={true} onSelect={function(event){}}>text</RadioButton>

我们可以构建另一个名为SuperRadioButton的组件，它可能有不同的呈现方式，但仍然具有与RadioButton相同的公共API，因此它是RadioButtonGroup的有效子组件。

如果我们正在访问父级，那么父级的内部成员将成为这些组件的公共API的一部分，我们需要更加谨慎地改变我们的代码，因为任何这些组件都可能导致整个应用程序中断。

Answer 2

回调。业主物业。传递事件以被树中的根捕获。将根传递给上下文。

有些方法，是的，但它们与反应的概念模型相反，后者在任何时候都应明确自上而下。简短的版本是＆＃34;你可以，但不要。＆＃34;

根本问题在于，您不希望孩子在其父母的知识之外进行变异。

这意味着唯一的例外是组件树的根，所以在道具或上下文中向下传递该控件的成员然后向＆＃34;传递内容＆＃34;半合法34;通过告诉根，然后可以重新绘制自己。

应用程序层Flux做了一些与此不太相似的事情，但将组件之外的事情完全传递给dataStore，后者用事件广播回来。

ReactJS - 孩子如何找到其父母？

编辑1：无论这样做的优点如何，有办法吗？

编辑2：所以它不可能？

2 个答案:

TL; DR你可能不想这样做。