作为React世界的初学者，我希望深入了解在使用{this.props.children}时会发生什么以及何时使用相同的情况。在下面的代码片段中它的相关性是什么？
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
‘children’是什么意思？
React文档说，你可以在代表“通用框”且不知道其子元素的组件上使用
props.children。对我来说，这并没有真正澄清问题。我相信对于某些人来说，这个定义很清楚，但对我来说却不是。
我对
this.props.children的简单解释是：它用于显示在调用组件时包含在开放和关闭标签之间的任何内容。
一个简单的例子：
这是一个用于创建组件的无状态函数的示例。同样，由于这是一个函数，因此没有
this关键字，所以只需使用props.children即可。
const Picture = (props) => {
return (
<div>
<img src={props.src}/>
{props.children}
</div>
)
}
<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>
)
}
如果您使用完整的开放和关闭标签
<Picture> </Picture>来调用组件，而不是使用自闭合标签<Picture />，则可以在其之间放置更多代码。
这将使
<Picture>组件与其内容解耦，并使其更具可重用性。
props.children 表示在调用/渲染组件时在开放和关闭标签之间的内容：
const Foo = props => (
<div>
<p>I'm {Foo.name}</p>
<p>abc is: {props.abc}</p>
<p>I have {props.children.length} children.</p>
<p>They are: {props.children}.</p>
<p>{Array.isArray(props.children) ? 'My kids are an array.' : ''}</p>
</div>
);
const Baz = () => <span>{Baz.name} and</span>;
const Bar = () => <span> {Bar.name}</span>;
调用/执行/渲染 Foo:
<Foo abc={123}>
<Baz />
<Bar />
</Foo>
我假设你是在一个 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>children 是 React 组件的特殊属性，包含组件内定义的任何子元素，例如上面 Example 中的 divs。{this.props.children} 将这些子元素包含在渲染结果中。
...什么情况下使用它？
当您想将子元素直接包含在呈现的输出中且保持不变时使用；反之则不使用。
render中编写子元素，但这将导致每个实例都是相同的子元素。通过接受子元素（如果适用），您的组件的每个实例都可以具有不同的内容。我已经更新了答案中的示例。 - T.J. Crowder这个问题已经被回答了，但是我想举一个优化的例子。你可以将内联内容分解，只获取特定的属性，而不是整个props对象（这意味着你不必一遍又一遍地写props）。
const MyView = ({title, children}) => {
return (
<>
<h1>{title}</h1>
{children}
</>
);
}
然后您可以这样使用它:
import { MyView } from './MyView';
const MyParentView = () => {
return (
<MyView title="Hello">
<h2>World</h2>
</MyView>
);
}
<div>
<h1>Hello</h1>
<h2>World</h2>
</div>
“Children”是一个保留名称，“children prop”指的是自定义组件开放和关闭标签之间的内容。在这种情况下，开放和关闭标签之间的内容将会被作为“children prop”的值，在该组件内部可以使用。
<MyComponent>
<div>Child 1</div>
<div>Child 2</div>
</MyComponent>
MyComponent组件有两个子元素：一个包含文本“Child 1”的div元素和一个包含文本“Child 2”的div元素。这些子元素可以通过props.children属性访问和渲染MyComponent组件。
例如，MyComponent组件可以像这样渲染其子元素：
class MyComponent extends React.Component {
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
这将把两个 div 元素渲染为 MyComponent 组件的子元素。