作为 React 世界的初学者，我想深入了解使用时会发生{this.props.children}什么以及使用相同的情况。它在下面的代码片段中有什么相关性？
render() {
if (this.props.appLoaded) {
return (
<div>
<Header
appName={this.props.appName}
currentUser={this.props.currentUser}
/>
{this.props.children}
</div>
);
}
}
甚至什么是“孩子”？
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>组件与其内容分离并使其更可重用。
我假设您在 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 组件的一个特殊属性，它包含在组件内定义的任何子元素，例如上面的divsinside Example。{this.props.children}包括渲染结果中的那些孩子。
...什么情况下使用相同
当您想直接将子元素包含在渲染输出中时，您会这样做；如果你没有。
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>
这是回答，但想添加一个优化示例。您可以分解内联以仅获取特定属性而不是整个 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>
);
}
最终结果将是呈现出如下内容的 HTML：
<div>
<h1>Hello</h1>
<h2>World</h2>
</div>