javascript - "props.children"如何在 React 组件上工作？

Question

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

我找到了下一个解决方案，它可以工作，但我不知 Prop 体是如何工作的；这是一个类(class)项目。

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

我真的不知道到底是什么{props.children}如果 Layout 组件开始持有其他组件 Navbar 组件是否仍然出现以及如何

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

幕后发生了什么？

Answer 1

props.children意味着 React 将渲染你放在 Layout 之间的任何内容零件。

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