Javascript 什么是 {this.props.children} 以及何时应该使用它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49706823/
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
What is {this.props.children} and when you should use it?
提问by Nimmy
Being a beginner to React world, I want to understand in depth what happens when I use {this.props.children}and what are the situations to use the same. What is the relevance of it in below code snippet?
作为 React 世界的初学者，我想深入了解使用时会发生{this.props.children}什么以及使用相同的情况。它在下面的代码片段中有什么相关性？
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
回答by Soroush Chehresa
What even is ‘children'?
The React docs say that you can use
props.childrenon components that represent ‘generic boxes' and that don't know their children ahead of time. For me, that didn't really clear things up. I'm sure for some, that definition makes perfect sense but it didn't for me.My simple explanation of what
this.props.childrendoes is that it is used to display whatever you include between the opening and closing tags when invoking a component.A simple example:
Here's an example of a stateless function that is used to create a component. Again, since this is a function, there is no
thiskeyword so just useprops.children
甚至什么是“孩子”？
React 文档说你可以
props.children在代表“通用框”并且提前不知道他们的孩子的组件上使用。对我来说，这并没有真正解决问题。我敢肯定，对某些人来说，这个定义很有意义，但对我来说却不是。我对它的简单解释
this.props.children是，它用于在调用组件时显示您在开始和结束标记之间包含的任何内容。一个简单的例子：
这是用于创建组件的无状态函数的示例。同样，由于这是一个函数，因此没有
this关键字，因此只需使用props.children
const Picture = (props) => {
return (
<div>
<img src={props.src}/>
{props.children}
</div>
)
}
This component contains an
<img>that is receiving somepropsand then it is displaying{props.children}.Whenever this component is invoked
{props.children}will also be displayed and this is just a reference to what is between the opening and closing tags of the component.
该组件包含一个
<img>正在接收一些props然后显示的{props.children}。每当调用此组件
{props.children}时，也将显示，这只是对组件开始和结束标记之间内容的引用。
//App.js
render () {
return (
<div className='container'>
<Picture key={picture.id} src={picture.src}>
//what is placed here is passed as props.children
</Picture>
</div>
)
}
Instead of invoking the component with a self-closing tag
<Picture />if you invoke it will full opening and closing tags<Picture> </Picture>you can then place more code between it.This de-couples the
<Picture>component from its content and makes it more reusable.
<Picture />如果您调用它会完全打开和关闭标签，而不是使用自关闭标签调用组件，<Picture> </Picture>然后您可以在它之间放置更多代码。这将
<Picture>组件与其内容分离并使其更可重用。
Reference: A quick intro to React's props.children
回答by T.J. Crowder
I assume you're seeing this in a React component's rendermethod, like this (edit: your edited question does indeed show that):
我假设您在 React 组件的render方法中看到了这一点，就像这样（编辑：您编辑的问题确实表明了这一点）：
class Example extends React.Component {
render() {
return <div>
<div>Children ({this.props.children.length}):</div>
{this.props.children}
</div>;
}
}
class Widget extends React.Component {
render() {
return <div>
<div>First <code>Example</code>:</div>
<Example>
<div>1</div>
<div>2</div>
<div>3</div>
</Example>
<div>Second <code>Example</code> with different children:</div>
<Example>
<div>A</div>
<div>B</div>
</Example>
</div>;
}
}
ReactDOM.render(
<Widget/>,
document.getElementById("root")
);<div id="root"></div>
<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>childrenis a special property of React components which contains any child elements defined within the component, e.g. the divsinside Exampleabove. {this.props.children}includes those children in the rendered result.
children是 React 组件的一个特殊属性，它包含在组件内定义的任何子元素，例如上面的divsinside Example。{this.props.children}在渲染结果中包含这些孩子。
...what are the situations to use the same
...什么情况下使用相同
You'd do it when you want to include the child elements in the rendered output directly, unchanged; and not if you didn't.
当您想直接将子元素包含在渲染输出中时，您会这样做；如果你没有。
