“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>&nbsp; <div>this is a child</div>&nbsp; <AnotherReactComponentAsLayoutChild/></Layout>