我使用 React 开发了几个月，但没有完全理解 React 组件模型的真正威力。有一天，我决定深入研究作曲，这就是我学到的。
在 React 中，一个组件可以有一个、多个或没有子组件。很好，但是等等 —— 什么是“孩子”？我们用一个例子来解释一下：
<Profile> <ProfileImage src="/asset/profile-img.png" /> <ProfileDetails name="Antonello" surname="Zanini" /> </Profile>
Profile 组件有两个子组件：ProfileImage 和 ProfileDetails，而这两个没有子组件。
“在同时包含开始标签和结束标签的 JSX 表达式中，这些标签之间的内容作为特殊 props 传递：props.children” — React 文档
本质上，props.children是一个特殊的prop，自动传递给每个组件，可用于在调用组件时渲染开始和结束标记之间包含的内容。这些类型的组件被官方文档标识为“盒子”。
在 React 的 JSX 中，具有子组件的组件始终由开始标记和结束标记标识。每个子项都必须放置在这两个标签之间，就像我们在上面看到的那样。当组件没有子组件时，您可以使用
假设我们要创建一个 ImageSlider 组件。我们的目标是像这样调用组件：
<ImageSlider> <img src="/assets/img-1.pg" /> <img src="/assets/img-2.pg" /> <img src="/assets/img-3.pg" /> </ImageSlider>
如你所见，ImageSlider是由几个组成的可以通过 props.children 访问和渲染。
export default function ImageSlider(props) {
return (
<div className="img-slider">
{props.children}
</div>
);
}
感谢 props.children 我们可以将内容嵌套在组件中，就像嵌套常见的 HTML 元素一样。
通过 props.children 传递给组件的内容可以包括
undefined、null、布尔值、数字、字符串、React 元素或任何这些类型的递归数组。它也可以是返回这些类型之一的函数。
请注意，正如 React 文档中提到的， false、null、undefined 和 true 是有效的子元素，但是它们将被忽略并且不会渲染。如果想要渲染 false、true、null 或 undefined，必须先将其转换为字符串：
<MyComponent>
{ String(undefined) }
</MyComponent>
props.children 允许我们组合组件，从而组合我们的前端界面；利用 React 组件模型的真正力量。
“React 拥有强大的组合模型，我们建议使用组合而不是继承在组件之间重用代码。” — React 文档
正如官方文档中所述，有时您可能需要填充组件中的多个“漏洞”。在这种情况下，定义多个自定义 props 可能是更好的方法，而不是使用 props.children；如下例所示：
function SplitPane(props) {
const { left, right } = props
return (
<div className="split-pane">
<div className="left-pane">
{ left }
</div>
<div className="right-pane">
{ right }
</div>
</div>
);
}
“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 (
<div className="img-slider">
{
React.Children.map(children, (child) =>
React.cloneElement(child, {
className: `${child.props.className} img-special-class`
})
)
}
</div>
);
}
React.Children.map allows us to iterate over props.children and transform each element according to the function passed as the second parameter. To achieve our goal, we used React.cloneElement. This is because we needed to change the value of the className prop, but props are immutable in React, so we had to clone each child.
Mastering props.children is essential to becoming a great React developer and beginning to harness the full potential of the React component model. props.children is one of React's most useful features, since it gives us the ability to render child components. Because of this, every developer should know how to use it properly.
I hope this article helps you master composition in React.
The post "A Complete Guide To props.children In React" appeared first on Writech.
以上是React 中 props.children 的完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！
