React 中的 props 和 children

本文将探讨 props.children 是什么以及为什么它对自定义组件有用。

React 中的 props.children 是什么

与任何其他基于组件的库一样，React 促进了代码的可重用性。首先，这是通过重用组件来实现的，但还有更多。

由于框架遵循声明式方法，因此很容易包含组件并嵌套它们。

React 提供了构建通用组件并使用组合模型自定义它们所需的工具和框架。

要使用组合模型自定义组件，你必须访问 props 对象的 children 属性。默认情况下，每个组件都具有此属性。

简单来说，子组件的 props.children 可用于在调用该子组件时访问开始和结束标记之间的嵌套值。让我们看一个简单的例子。

export default function App() {
  return (
    <div className="App">
      <Child>
        <h1>Hello, world</h1>
      </Child>
    </div>
  );
}
function Child(props) {
  return <div>{props.children}</div>;
}

在这个例子中，看起来我们直接在 App 组件中显示内容，但我们在 <Child> 组件的开始标签和结束标签之间传递内容作为 props。稍后我们在 Child 组件中引用 <h1> 元素。

你可以在 CodeSandbox 上查看实时代码示例。

请注意，你必须调用带有开始和结束标签的组件才能使 props.children 功能正常工作。

在某些情况下，React 开发人员会编写自闭合标签：<Child />。这与需要打开和关闭标签才能工作的 props.children 不兼容。

在 React JSX 中传递 props.children

当你需要动态生成内容并将其传递给子组件时，React 的此功能特别有用，子组件可能只是一个样式化的容器。这个用例的一个很好的例子是任何信使应用程序中的消息框。

在示例中，我们通过 props 从父组件向子组件传递了一个 <h1> 元素。你想要传递给子组件的内容量不受限制。

你在子组件的打开和关闭 JSX 标记之间放置的任何内容都可以通过 props.children 在子组件中呈现。

如果你有很多内容要作为 children 传递，你可能需要将它们传递到子组件中的多个孔中。React 让开发人员可以自由地在子组件上创建自定义 prop 属性。

让我们看一个例子。

export default function App() {
  return (
    <div className="App">
      <Child
      greeting={<h1>Hello, world</h1>}
      goodbye={<h1>Goodbye, world</h1>}
      >
      </Child>
    </div>
  );
}
function Child(props) {
  return <div>
           <div className="top">{props.greeting}</div>
           <div className="bottom">{props.goodbye}</div>
         </div>;
}

在这种情况下，我们不是在开始标签和结束标签之间传递 <h1> 元素，而是创建自定义属性 greeting 和 goodbye 并将元素作为 props 传递。

在 Child 组件中，我们有两个单独的 <div> 元素，它们显示来自每个属性的值。

这个例子的关键点是你可以传递 HTML 元素，如 <h1> 作为 props，以及自定义组件。例如，Vue 有一个类似的概念，叫做 slots。

然而，在 React 中，你并不局限于可以作为 props 传递的值。

在 React 中使用 children 属性传递孩子

在 React 中传递 children 值的最常见方法是将它们放在组件的开始标签和结束标签之间。或者，你可以在组件上使用 children 值并设置其值。

在 React 中使用 React.createElement() 传递子节点

JSX 允许我们以声明方式定义和调用 React 组件，但所有 JSX 代码最终都编译为 React.createElement() 调用。

如果你不使用 JSX 来开发你的 web 应用，你可以直接使用 React.createElement() 方法。前两个参数是 type 和 props。

之后，任何后续参数都将作为子元素传递给创建的元素，并且可以通过访问 props.children 值来引用。