Access to parent React child details

Question

I am currently developing a game engine interface written in JavaScript and ReactJS.

If the game object has a texture, the texture source will be displayed on the game object. For this, for the game object, you must have a link to the texture or, more specifically, to the source of the texture. I hope you have a JSX snippet like the following.

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

The best solution I could get to get the link is to have the texture as a support, for example:

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

If the terminology specific to the game engine is too confusing, think of it as the caption component inside the button component, where the title component has specific data that the button should access.

My question boils down to the following: is it possible to access the child’s shoulder after the children were installed without hacks or were anti-patterns?

Answer 1

You should just do this.props.texture.props . I do not think this is an anti-pattern, but I do not think this is a general pattern. Of course, it looks like it could be an encapsulation violation if you want to access certain support.

You do not need to pass the element as a support in order to get a link to it. You can access children through this.props.children .

See the documentation for more information.

Answer 2

Since the links in the comments are broken, I am attaching a link to the current implementation of the react-router Switch module, where the children are analyzed (see the render() function). Also in this training video, the author refers to the details of the children from the parent.

In order not to encounter the same problem when the link expires, here is the code for accessing details for children from the parent, as shown above, when it is inspired by react-router 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 3

What do you need to own a texture, and what should be its parent?

Could you define a GameObject that is the owner and parent of the texture? eg:

 <GameObject textureSoure='myimage.png' /> 

And does GameObject then render the texture (in GameObject render ())?

 return <....> <Texture source={ this.props.textureSource } /> </....> 

Answer 4

Is that what you think?

 const Game = ({ children }) => { // small hack to turn single child, into array if (!children.length) { children = [children]; } children.map((child, i) => { // now have access to props.source in parent console.log(child.props.source); }) return ( < div > { children } < /div> ); } const Texture = ({source}) => { return ( <div>Texture: {source}</div > ); } ReactDOM.render(( < Game > < Texture source = "thing.png" / > < Texture source = "other.png" / > < /Game> ), document.getElementById('game')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id='game'></div> 

This is a bit dirty.

I personally either provided Game array of textures for download.

Or completely separate Game and Texture , so the data is transmitted in only one way.