ReactJS - How can a child find its parent?

Question

Is there a way in ReactJS for a component to find out who it's parent is?

EDIT 1: Regardless of the merits of doing this, is there a way?

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?

eg

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

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.

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

EDIT 2: So it's not possible?

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 (eg 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.

Answer 1

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

TL;DR you probably don't want to do this ever.

Let's say our RadioButton has this public interface:

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

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.

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.

Answer 2

Callbacks. Owner properties. Passing events out to be caught by the root in the tree. Passing the root down through contexts.

There are ways, yes, but they're contrary to the conceptual model of react, which is to be explicitly top down at all times. The short version is "you can, but don't."

The fundamental problem is that you don't want a child mutating outside its parent's knowledge.

That means that the sole exception to this is the root of the component tree, so it's semi-legit to pass a member of that control downwards in props or contexts then to "pass things up" by telling the root, which may then repaint itself.

The application layer Flux does something not terribly dissimilar to this, but passes things outside of the component heirarchy entirely to a dataStore, which broadcasts things back in with events.