“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。

Answer 2

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

<Layout>

  <div>this is a child</div>

  <AnotherReactComponentAsLayoutChild/>

</Layout>