ReactJS-孩子如何找到其父母? [英] ReactJS - How can a child find its parent?

问题描述

ReactJS中是否有一种方法可以让组件确定其父对象是谁?

我还没有找到一种执行此操作的React方法-从我的看到，想法是将回调从父级传递给子级，而子级调用回调-并没有意识到回调是实际上是在父母身上.

I haven't found a React way to do this - from what I can see, the idea is to pass callbacks down to the child from the parent, and the child calls the callback - unaware of the fact that the callback is actually on the parent.

我尝试设置所有者"财产，这个想法似乎行得通，但是我不知道最好的方法是什么?

I've tried setting an "owner" property, and that idea seems to work, but I wonder what's the best approach?

例如

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

然后在子组件中，我可以执行owner.method，而且看起来工作正常.我知道这不是真正的父母/孩子关系，但是这是我在测试中找到的最接近的亲子关系.

Then in the child component, I can do owner.method, and it seems to work fine. I know this isn't a true parent/child relationship, but is the closest I've found in my tests.

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

Some may say that callbacks are a cleaner way of doing this, but the parent/child relationship for some things (e.g. RadioButtonGroup and RadioButton) seems natural and would benefit from knowing this relationship, in my opinion.

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

The thing that I don't like about the idea that it's not supported is that 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). This can't happen in JSX because if there is interaction between the elements - there has to be javascript events that bind the components together - every single time you use them. Designers can't simply write HTML like syntax - Someone has to step in and put some javascript bindings in there - which then makes the maintenance harder. I think the idea makes sense for overriding default behavior, but default behaviors should be supported. And defaults would require knowing either your parent, or who your owner is.

推荐答案

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

There are a number of benefits to not doing this, the main two are: reusability and encapsulation.

假设我们的RadioButton具有以下公共接口:

Let's say our RadioButton has this public interface:

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

我们可以构造另一个名为SuperRadioButton的组件，该组件可能具有不同的表示方式，但仍具有与RadioButton相同的公共api，因此它是RadioButtonGroup的有效子代.

We could construct another component called SuperRadioButton, which might have a different way of presenting itself, but still have the same public api as RadioButton, so it's a valid child of RadioButtonGroup.

如果我们要访问父级，则父级的内部结构将成为这些组件的公共api的一部分，我们需要更加谨慎地更改代码，因为任何这些组件的更改都可能导致整个应用程序中断.

If we're accessing the parent, then the parent's internals become part of the public api of these components, and we need to be much more careful with how we change our code, because a change in any of these components could cause the entire application to break.

这篇关于ReactJS-孩子如何找到其父母?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！