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

IT技术 javascript facebook reactjs
2021-04-27 15:10:04

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

编辑 1:不管这样做有什么好处,有没有办法?

我还没有找到一种 React 方法来做到这一点 - 从我所见,这个想法是将回调从父级传递给子级,而子级调用回调 - 不知道回调实际上是在父母。

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

例如

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

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

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

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

我不喜欢它不受支持的想法是 HTML 可以用零 javascript 标记 - 它暗示了默认功能 - 某些元素需要有父元素 - 它们被定义为其他元素的子元素(例如 ul 和 li)。这在 JSX 中不会发生,因为如果元素之间存在交互 -必须有 javascript 事件将组件绑定在一起 - 每次使用它们时。设计人员不能简单地编写类似 HTML 的语法——必须有人介入并在其中放置一些 javascript 绑定——这会使维护变得更加困难。我认为这个想法对于覆盖默认行为是有意义的,但应该支持默认行为默认情况下需要知道您的父母或您的所有者是谁。

2个回答

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

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

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

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

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

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

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

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

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

这意味着唯一的例外是组件树的根,因此在 props 或 contexts 中向下传递该控件的成员然后通过告诉 root 来“传递事物”是半合法的,然后它可能会重新绘制自己.

应用层 Flux 做的事情与此并无太大不同,但将组件层次结构之外的东西完全传递给 dataStore,它通过事件广播回来。