javascript - ReactJS - 一个 child 如何找到它的 parent ？

Question

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

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

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

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

例如

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

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

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

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

The thing that I don't like about the idea that it's not supported isthat HTML can be marked up with zero javascript - and it has implied,default functionality - some elements are required to have parents -they are defined as children of other elements (e.g. ul and li). Thiscan't happen in JSX because if there is interaction between theelements - there has to be javascript events that bind thecomponents together - every single time you use them. Designers can'tsimply write HTML like syntax - Someone has to step in and put somejavascript bindings in there - which then makes the maintenanceharder. I think the idea makes sense for overriding default behavior,but default behaviors should be supported. And defaults wouldrequire knowing either your parent, or who your owner is.

Answer 1

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

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

假设我们的 RadioButton 有这个公共(public)接口(interface):

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

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

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