ReactJS - 孩子如何找到它的父母？

Question

ReactJS 中有没有办法让组件找出它的父级是谁？

编辑 1：不管这样做有什么好处，有没有办法？

我还没有找到一种 React 方法来做到这一点——据我所知，这个想法是将回调从父级传递给子级，然后子级调用回调——不知道回调是实际上在父母身上。

我尝试设置“所有者”属性，这个想法似乎可行，但我想知道最好的方法是什么？

例如

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

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

有些人可能会说回调是一种更简洁的方法，但在我看来，某些事物（例如 RadioButtonGroup 和 RadioButton）的父/子关系似乎很自然，并且会受益于了解这种关系。

编辑 2：所以这是不可能的？

我不喜欢它不受支持的想法是 HTML 可以用零个 javascript 进行标记——这暗示了， 默认功能 - 某些元素需要有父元素 - 它们被定义为其他元素的子元素（例如 ul 和 li）。这 在 JSX 中不会发生，因为如果 元素 - 必须是绑定 组件在一起 - 每次使用它们时。设计师不能 只需编写类似 HTML 的语法 - 必须有人介入并放入一些 javascript绑定在那里 - 然后进行维护 更难。我认为这个想法对于覆盖默认行为是有意义的， 但应该支持默认行为。并且默认值会 需要知道您的父母或您的主人是谁。

Answer 1

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

TL；DR，您可能永远不想这样做。

假设我们的 RadioButton 有这个公共接口：

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

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

如果我们正在访问父级，那么父级的内部将成为这些组件的公共 api 的一部分，我们需要更加小心地更改代码，因为任何这些组件的更改都可能导致整个应用程序都崩溃了。

Answer 2

回调。业主财产。传递事件以被树中的根捕获。通过上下文传递根。

有一些方法，是的，但它们与 react 的概念模型相反，即始终明确地自上而下。简短的版本是“你可以，但不要。”

根本问题是您不希望孩子在父母不知道的情况下发生变异。

这意味着唯一的例外是组件树的根，因此在道具或上下文中向下传递该控件的成员然后通过告诉根来“向上传递”是半合法的，这可能然后重绘自己。

应用层 Flux 所做的事情与此没有太大的不同，但将组件层次结构之外的内容完全传递给 dataStore，后者将内容与事件一起广播回来。