Accessing React component children props from the parent

Question

I am currently in the process of designing the interface for a game engine that is written in JavaScript and ReactJS.

If a game object has a texture, the source of the texture will show up on the game object. For that to work, a game object needs to have the reference of the texture or more specifically the source of a texture. What I'm hoping for is to have a JSX snippet like the following one.

<GameObject>   <Texture source="myimage.png" /> </GameObject> 

The best solution I could come up with to get the reference is to have the texture as a prop, like so:

<GameObject texture={<Texture source="myimage.png" />} /> 

If the game engine-specific terminology is a bit too bewildering, think of it as a caption component inside a button component, where the caption component has specific data the button needs to access.

My question boils down to this: Is it possible to access children's prop after the children have been mounted without hacks or being an anti-pattern?

Answer 1

Because the links in the comments are broken, I enclose a link to the current react-router Switch module implementation where children are parsed (see the render() function). Also in this tutorial video the author accesses children props from parent.

To not bump into the same problem with link expiring again, here is how the code for accessing children props from parent would look like for above example when inspired by react-router's Switch:

(inside GameObject)

const { children } = this.props  React.Children.forEach(children, element => {   if (!React.isValidElement(element)) return    const { source } = element.props    //do something with source.. }) 

Answer 2

You should be able to just do this.props.texture.props. I'm not ware of it being an anti-pattern, but I don't think it's a common pattern either. It certainly looks like it may be breaking encapsulation if you want to access a specific prop.

You don't have to pass the element as prop to get a reference to it. You can access children via this.props.children.

See the documentation for more info.