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

Posted 2023-02-21

【中文标题】“props.children”如何在 React 组件上工作？

【英文标题】：How "props.children" works on a React component?

【发布时间】：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>

幕后发生了什么？

【参考方案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>