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

Question

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

编辑1:无论做到这一点的优点,有没有办法？

我没有找到一种React方法来实现这一点 - 从我所看到的,我的想法是将回调传递给来自父级的子进程,并且子进程调用回调 - 不知道回调实际是在家长.

我试过设置一个"所有者"属性,这个想法似乎有效,但我想知道什么是最好的方法？

例如

<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 的一部分，并且我们需要更加小心地更改代码，因为任何这些组件的更改都可能会导致整个应用程序打破。