我使用 React 开发了几个月，但没有完全理解 React 组件模型的真正威力。有一天，我决定深入研究作曲，这就是我学到的。

React 组件和子组件

在 React 中，一个组件可以有一个、多个子组件，也可以没有子组件。很好，但是等等 —— 什么是“孩子”？我们用一个例子来解释一下：

配置文件组件有两个子组件：ProfileImage 和 ProfileDetails，而这两个没有子组件。

“在同时包含开始标签和结束标签的 JSX 表达式中，这些标签之间的内容作为特殊 props 传递：props.children” — React 文档

本质上，props.children是一个特殊的prop，自动传递给每个组件，可用于在调用组件时渲染开始和结束标记之间包含的内容。这些类型的组件被官方文档标识为“boxes”。

通过 JSX 语法识别组件

在 React 的 JSX 中，具有子组件的组件始终由开始标签和结束标签来标识。每个子项都必须放置在这两个标签之间，就像我们在上面看到的那样。当组件没有子组件时，您可以使用 或 调用它，但通常首选后一种语法。自闭合标签的目的是使代码更短且更易于阅读。

操作中的 props.children

假设我们要创建一个 ImageSlider 组件。我们的目标是像这样调用组件：

可以看到，ImageSlider是由多个组成，可以通过props.children来访问和渲染。

export default function ImageSlider(props) { 
    return (
      

        {props.children}
      
    );  
}

感谢 props.children 我们可以将内容嵌套在组件中，就像嵌套常见的 HTML 元素一样.

props.children 允许使用哪些类型的内容？

通过 props.children 传递给组件的内容可以包括

undefined、null、布尔值、数字、字符串、React 元素或任何这些类型的递归数组。它也可以是返回这些类型之一的函数。

请注意，正如 React 文档中提到的， false、null、undefined 和 true 是有效的子项，但它们将被忽略并且不会渲染。如果想要渲染 false、true、null 或 undefined，必须先将其转换为字符串：

  { String(undefined) }

为什么 props.children 如此重要？

props.children 允许我们组合组件，从而组合我们的前端界面；利用 React 组件模型的真正力量。

“React 拥有强大的组合模型，我们建议使用组合而不是继承以在组件之间重用代码。” — React 文档

正如官方文档中所述，有时您可能需要填充组件中的多个“漏洞”。在这种情况下，定义多个自定义 props 可能是更好的方法，而不是使用 props.children；如下例所示：

function SplitPane(props) {
  const { left, right } = props

  return (
    

      

        { left }      
      
      

        { right }      
      
    
  );
}

React.Children

“React.Children 提供了处理 props.children 不透明数据结构的实用程序” — React 文档

为什么 props.children 是一个“不透明的数据结构”？

因为 props.children 可以由一个、多个或没有子元素组成，这意味着它的值可以是单个子节点，子节点数组，或者 未定义分别。感谢 React.Children API，我们可以轻松处理 props.children，而无需考虑其每种可能的类型。值得庆幸的是，一切都会在后台为我们处理。

在撰写本文时，React.Children 提供了五种不同的实用程序：

• 地图

• forEach

• 数数

• 仅有的

• toArray

让我们通过一个例子来看看如何使用 React.Children。假设我们想要将特殊的 CSS 类 img-special-class 添加到 ImageSlider 组件的每个子组件中。这可以按如下方式完成：

export default function ImageSlider(props) {
  const { children } = props

  return (
    

      {
        React.Children.map(children, (child) =>
          React.cloneElement(child, {
              className: `${child.props.className} img-special-class`
            })
        )
      }
    
  );
}

React.Children.map 允许我们迭代 props.children 并根据作为第二个参数传递的函数转换每个元素。为了实现我们的目标，我们使用了 React.cloneElement。这是因为我们需要更改 className prop 的值，但是 props 在 React 中是不可变的，因此我们必须克隆每个子级。

结论

掌握 props.children 对于成为一名优秀的 React 开发人员并开始充分利用 React 组件模型的潜力至关重要。 props.children 是 React 最有用的功能之一，因为它使我们能够渲染子组件。正因为如此，每个开发者都应该知道如何正确使用它。

我希望这篇文章能帮助你掌握 React 中的组合。

帖子“A Complete Guide To props.children In React”首先出现在 Writech 上。