Javascript 从父级访问 React 组件子级道具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29670173/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing React component children props from the parent
提问by Johannes Stein
I am currently in the process of designing the interface for a game engine that is written in JavaScript and ReactJS.
我目前正在为用 JavaScript 和 ReactJS 编写的游戏引擎设计界面。
If a game object has a texture, the source of the texture will show up on the game object. For that to work, a game object needs to have the reference of the texture or more specifically the source of a texture. What I'm hoping for is to have a JSX snippet like the following one.
如果游戏对象具有纹理，则纹理的来源将显示在游戏对象上。为此，游戏对象需要具有纹理的引用或更具体地说是纹理的来源。我希望有一个像下面这样的 JSX 片段。
<GameObject>
<Texture source="myimage.png" />
</GameObject>
The best solution I could come up with to get the reference is to have the texture as a prop, like so:
我能想出的最佳解决方案是将纹理作为道具，如下所示：
<GameObject texture={<Texture source="myimage.png" />} />
If the game engine-specific terminology is a bit too bewildering, think of it as a caption component inside a button component, where the caption component has specific data the button needs to access.
如果游戏引擎特定的术语有点令人眼花缭乱，可以将其视为按钮组件内的标题组件，其中标题组件具有按钮需要访问的特定数据。
My question boils down to this: Is it possible to access children's prop after the children have been mounted without hacks or being an anti-pattern?
我的问题归结为：在没有黑客或反模式的情况下安装儿童后，是否可以访问儿童道具？
回答by Matej P.
Because the links in the comments are broken, I enclose a linkto the current react-routerSwitchmodule implementation where children are parsed (see the render()function). Also in this tutorial videothe author accesses children props from parent.
因为评论中的链接已损坏，我附上了一个指向当前react-routerSwitch模块实现的链接，其中解析了子项（请参阅render()函数）。同样在本教程视频中，作者从父级访问子级道具。
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:
为了避免再次遇到链接过期的相同问题，以下是在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..
})
回答by Felix Kling
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.
你应该能够做到this.props.texture.props。我不知道这是一种反模式，但我认为这也不是一种常见的模式。如果您想访问特定的道具，它肯定看起来可能会破坏封装。
You don't have to pass the element as prop to get a reference to it. You can access children via this.props.children.
您不必将元素作为道具传递来获取对它的引用。您可以通过 访问儿童this.props.children。
See the documentationfor more info.
有关更多信息，请参阅文档。
回答by WayneC
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() )?
然后 GameObject 渲染纹理（在 GameObject 的 render() 中）？
return <....>
<Texture source={ this.props.textureSource } />
</....>
回答by Phil Poore
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 Gamean array of textures to load itself.
我个人要么提供Game一组纹理来加载自己。
Or decouple Gameand Textureentirely, so data flows only one way.
或去Game和Texture完全，所以数据流只有一个办法。
