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 t

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

Is this the sort of thing you are thinking?

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>

It's a little messy really.

I would personally either give Game an array of textures to load itself.

Or decouple Game and Texture entirely, so data flows only one way.

Answer 3

What needs to own the texture, and what should its parent be?

Could you define a GameObject that owns and is the parent of the Texture? eg:

<GameObject textureSoure='myimage.png' />

And GameObject then renders the texture (In GameObject's render() )?

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

Answer 4

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.