Javascript 什么是{this.props.children}以及什么时候应该使用它？

作为一个反应世界的初学者，我想深入了解当我使用

{this.props.children}

时会发生什么，以及在什么情况下使用相同的方法。在下面的代码片段中，它的相关性是什么

render() {
  if (this.props.appLoaded) {
    return (
      <div>
        <Header
          appName={this.props.appName}
          currentUser={this.props.currentUser}
        />
        {this.props.children}
      </div>
    );
  }
}

render（）{
如果（此.props.appload）{
返回(
{this.props.children}
);
}
}

我假设您在React组件的

呈现

方法中看到了这一点，就像这样（编辑：您编辑的问题确实显示了这一点）：

类示例扩展了React.Component{
render（）{
返回
子项（{this.props.Children.length}）：
{this.props.children}
;
}
}
类小部件扩展了React.Component{
render（）{
返回
第一个
示例
：
1.
2.
3.
第二个
示例
具有不同的子项：
A.
B
;
}
}
ReactDOM.render(
,
document.getElementById（“根”）
);


什么是“孩子”？

React文档说，您可以在表示“通用框”的组件上使用
props.children
，而这些组件事先不知道它们的子组件。对我来说，这并没有真正把事情弄清楚。我相信对一些人来说，这个定义很有道理，但对我来说却没有

我对
this.props.children
的简单解释是，调用组件时，它用于显示开始标记和结束标记之间包含的任何内容

一个简单的例子：

下面是一个用于创建组件的无状态函数的示例。同样，由于这是一个函数，因此没有
这个
关键字，所以只需使用
道具。儿童

如果您调用该组件，则可以在其之间放置更多代码，而不是使用自动关闭标记调用该组件

这将使
组件与其内容分离，并使其更加可重用

参考：
道具。子项
表示调用/呈现组件时开始标记和结束标记之间的内容：

constfoo=props=>(
我是{Foo.name}

abc是：{props.abc}

我有{props.children.length}个孩子

它们是：{props.children}

{Array.isArray（props.children）“‘我的孩子是一个数组’：”}

);
constbaz=（）=>{Baz.name}和；
常量Bar=（）=>{Bar.name}；

调用/调用/呈现
Foo
：



在给定链接中，不清楚当我在组件中使用{this.props.children}时会发生什么。如果子节点不考虑可重用性，那么调用{props.children}时是否有性能差异从子组件中调用，而不是在子组件中使用它？@Nimmy：对不起，我不知道你所说的*“…比在子组件中使用它”是什么意思。我的意思是“在子组件中调用{this.props.children}，而不是直接在相应的子组件中写入节点”。@Nimmy我假设你在想，我为什么要把{this.props.children}相反，我可以写下来，我知道。如果是这样的话，请这样做，并且在性能上有一点优势。但是您的组件将是静态的，它不能与位于代码库中不同位置的不同子组件一起重用。@ssk:啊！不错。尼米-是的，您可以直接在
渲染中编写子组件，但是在每个实例中都是相同的子元素。通过接受子元素（在适当的情况下），组件的每个实例都可以有不同的内容。我已经更新了答案中的示例。@Nimmy在使用{props.children}我们没有性能问题，只需要将传递的组件作为道具。当我们可以在子组件中使用子组件时，不需要使用{props.children}示例来自@alpitan，您可以在答案末尾看到参考：|非常感谢。解释得非常好。我喜欢您在文本中使用引号的方式。谢谢。这是一个更简单、更简洁和有用的演示。
const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}

//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>
  )
}