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

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

如果游戏对象具有纹理，则纹理的来源将显示在游戏对象上。为了实现这一点，游戏对象需要有纹理的参考，或者更具体地说是纹理的来源。我希望有一个JSX代码段，如下所示

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

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

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

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

---

我的问题归结到这一点：在安装儿童道具后，是否可以在没有黑客或反模式的情况下访问儿童道具？

您应该能够只执行

这个.props.texture.props

。我不知道这是一种反模式，但我也不认为这是一种常见的模式。如果你想访问一个特定的道具，它看起来可能破坏了封装

您不必将元素作为道具传递以获取对它的引用。您可以通过

this.props.children

访问子级

---

有关详细信息，请参见。

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

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

<GameObject textureSoure='myimage.png' />

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

返回

这是你在想的事情吗

const游戏=({
儿童
}) => {
//将单个孩子变成数组的小技巧
如果（！children.length）{
儿童=[儿童]；
}
children.map（（child，i）=>{
//现在可以访问父级中的props.source
console.log（child.props.source）；
})
返回（
{
儿童
}
);  
}
常量纹理=（{source}）=>{
返回(
纹理：{source}）；
}
ReactDOM.render（（

)，document.getElementById（'game'）
由于注释中的链接已断开，因此我附上了一个到当前
react router
Switch
模块实现的链接，在该模块实现中解析子级（请参见
render（）
函数）。此外，作者还可以从家长处访问儿童道具

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

（游戏对象内部）

看看react路由器代码是如何解析孩子的：@wiredparie这正是我要找的。谢谢。引用的函数现在在模块中，我希望它会有所帮助，但由于链接现在断开，信息丢失了。同样-@wiredparie你能链接到git repos的规范URL吗（即，在那里有一个提交哈希，这样它就不会断开）？这显然是一种反模式。如果您需要在家长中从孩子那里得到一些东西，那么可以在家长中使用
状态
，并将其作为
道具
传递给孩子，我不认为这是一种反模式来自我反应。然而，对于react使用的popullar数据流模式，例如Redux和Flux，它确实是一种反模式。它打破了数据的单向流动。规范的URL可以防止链接被轻易破坏（显然最好是直接在SO中发布代码）
return <....>
   <Texture source={ this.props.textureSource } />
     </....>

const { children } = this.props

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

  const { source } = element.props

  //do something with source..
})