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

Question

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

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

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

我能想出的最佳解决方案是将纹理作为道具,如下所示:

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

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

我的问题可归结为:孩子们在没有黑客或反模式的情况下安装后,是否有可能进入儿童的道具？

Answer 1

由于注释中的链接已断开,因此我附上了一个指向当前react-router Switch模块实现的链接,其中解析了子节点(请参阅render()函数).同样在本教程视频中,作者从父级访问子道具.

为了不再遇到与链接再次过期相同的问题,以下是在受到react-routers的启发时,从父级访问子道具的代码看起来像上面的示例Switch:

(在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

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

您不必将元素作为 prop 传递来获取对其的引用。您可以通过以下方式访问儿童this.props.children。

请参阅文档以获取更多信息。