我目前正在为用 JavaScript 和 ReactJS 编写的游戏引擎设计界面。
如果游戏对象具有纹理，则纹理的来源将显示在游戏对象上。为此，游戏对象需要具有纹理的引用或更具体地说是纹理的来源。我希望有一个像下面这样的 JSX 片段。
<GameObject>
<Texture source="myimage.png" />
</GameObject>
我能想出的最佳解决方案是将纹理作为props，如下所示：
<GameObject texture={<Texture source="myimage.png" />} />
如果游戏引擎特定的术语有点令人眼花缭乱，可以将其视为按钮组件内的字幕组件，其中字幕组件具有按钮需要访问的特定数据。
我的问题归结为：在没有黑客或反模式的情况下安装儿童后，是否可以访问儿童props？
因为评论中的链接已损坏，我附上了一个指向当前react-router Switchmodule实现的链接，其中解析了子项（请参阅render()函数）。同样在本教程视频中，作者从父级访问子级props。
为了避免再次遇到链接过期的相同问题，以下是在react-router's 的启发下，从父级访问子props的代码在上面的示例中的样子Switch：
（在游戏对象内）
const { children } = this.props
React.Children.forEach(children, element => {
if (!React.isValidElement(element)) return
const { source } = element.props
//do something with source..
})
你应该能够做到this.props.texture.props。我不知道这是一种反模式，但我认为这也不是一种常见的模式。如果您想访问特定的props，它肯定看起来可能会破坏封装。
您不必将元素作为props传递来获取对它的引用。您可以通过 访问儿童this.props.children。
有关更多信息，请参阅文档。
什么需要拥有纹理，它的父级应该是什么？
你能定义一个拥有并且是纹理的父级的游戏对象吗？例如：
<GameObject textureSoure='myimage.png' />
然后 GameObject 渲染纹理（在 GameObject 的 render() 中）？
return <....>
<Texture source={ this.props.textureSource } />
</....>
这是你在想的事情吗？
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完全，所以数据流只有一个办法。