从父级访问 React 组件子级道具

Question

我目前正在为一个用 JavaScript 和 ReactJS 编写的游戏引擎设计界面。

如果游戏对象具有纹理，则纹理的来源将显示在游戏对象上。 为此，游戏对象需要具有纹理的引用或更具体地说是纹理的来源。 我希望有一个像下面这样的 JSX 片段。

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

我能想出的获得参考的最佳解决方案是将纹理作为道具，如下所示：

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

如果游戏引擎特定的术语有点令人困惑，可以将其视为按钮组件内的字幕组件，其中字幕组件具有按钮需要访问的特定数据。

我的问题归结为：在没有黑客或反模式的情况下安装孩子后是否可以访问孩子的道具？

Answer 1

由于评论中的链接已损坏，因此我附上了一个指向当前react-router Switch模块实现的链接，其中解析了子级（请参阅render()函数）。 同样在本教程视频中，作者从父级访问子级道具。

为了避免再次遇到链接过期的相同问题，以下是受react-router的Switch启发时，从父级访问子级道具的代码在上述示例中的样子：

（在游戏对象内）

const { children } = this.props

React.Children.forEach(children, element => {
  if (!React.isValidElement(element)) return

  const { source } = element.props

  //do something with source..
})

Answer 2

你应该可以这样做this.props.texture.props 。 我不知道它是一种反模式，但我也不认为它是一种常见的模式。 如果您想访问特定的道具，它肯定看起来可能会破坏封装。

您不必将元素作为道具传递来获取对它的引用。 您可以通过this.props.children访问孩子。

有关更多信息，请参阅 文档。

Answer 3

这是你在想的那种事情吗？

 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>

真的有点乱。

我个人要么给Game一个纹理数组来加载自己。

或者完全解耦Game和Texture ，因此数据只以一种方式流动。

Answer 4

什么需要拥有纹理，它的父级应该是什么？

你能定义一个拥有纹理并且是纹理父级的游戏对象吗？ 例如：

<GameObject textureSoure='myimage.png' />

然后 GameObject 渲染纹理（在 GameObject 的 render() 中）？

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

Answer 5

解决同一问题的另一种方法是：

将必须从孩子有条件地访问的日期添加到父母道具中......

你永远不会出错🙃🙃🙃