“props.children”如何在 React 组件上工作？答案

【问题标题】：How "props.children" works on a React component?“props.children”如何在 React 组件上工作？
【发布时间】：2019-12-02 03:42:53
【问题描述】：

我正在编写 React 实践代码，但我停止了，因为我必须在其他页面之间共享导航栏

我找到了下一个解决方案，它可以工作，但我不知道具体是如何工作的；这是一个课程项目。

function Layout(props) {
  return(
    <React.Fragment>
      <Navbar />
      {props.children}
    </React.Fragment>
  );
}

我真的不知道 {props.children} 到底做了什么，以及如果布局组件开始持有其他组件导航栏组件仍然出现

<Layout>
  <Switch>
    <Route exact path="/badges" component={Badges}/>
    <Route exact path="/badges/new" component={BadgeNew} />
  </Switch>
</Layout>

幕后发生了什么？

【问题讨论】：

标签： javascript reactjs ecmascript-6 react-router

【解决方案1】：

props.children 表示 React 将渲染你放在 Layout 组件之间的任何内容。

例如，如果你在布局组件之间放置一个 div 块，props.children 将是那个 div。

【讨论】：

哇哦，所以基本上它就像 Angular 的，对吧？
对不起，我没有使用 Angular，所以我无法将它与 react 进行比较。但是 props.children 基本上可以让您将多个组件传递给您的父组件，而无需在父组件中硬编码这些子组件，从而提高了可伸缩性。
很棒的朋友，感谢您的帮助:)

【解决方案2】：

您放在Layout-tag 中的每个 JSX 代码都将放在布局组件的 props-object 的 children 属性中。

<Layout>
  <div>this is a child</div>
  <AnotherReactComponentAsLayoutChild/>
</Layout>

【讨论】：