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

Question

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

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

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组件之间的任何内容。

例如，如果您在Layout组件之间放置一个div块，props.children则将是该div。