React 中的 props 和 children

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. React 中的 props.children 是什么
  2. 在 React JSX 中传递 props.children
  3. 在 React 中使用 children 属性传递孩子
  4. 在 React 中使用 React.createElement() 传递子节点
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> 元素,而是创建自定义属性 greetinggoodbye 并将元素作为 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() 方法。前两个参数是 typeprops

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

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Element