React.Children.map与children.map之间有什么区别？

Question

在 React v16.2.0 中，有一个新的 API 调用 React.Children。

我很好奇 React.Children 和直接使用 children 之间的区别。

例如，如果我想要操作子内容，我可以在这两种方法中都做到。example

const Child = () => (
  <div>child</div>
)

class App extends React.Component {
  render() {
    const template1 = React.Children.map(this.props.children, (child) => {
      return React.cloneElement(child);
    });

    const template2 = this.props.children.map((child) => {
      return React.cloneElement(child);
    });
    return [template1, template2];
  }
}

结果是一样的。

有人知道有什么不同吗？

或者 React 团队发布这个 API 的目的是什么？

- Chen-Tai

Answer 1

React组件的子元素可能为undefined或null。React.Children.map是一个实用函数，可以帮助您处理不同情况。

React.Children.map

调用一个函数，并将每个直接包含在 children 内的子元素作为 thisArg 来执行该函数。如果 children 是一个数组，它将被遍历，并且将为数组中的每个子元素调用该函数。如果 children 为null或 undefined，则此方法会返回null或undefined而不是数组。

您应该始终使用React.Children.map来遍历您的应用程序中的子元素。使用children.map会在children不是数组时抛出错误。

- kwrush

Answer 2

请看下面的示例来了解不同之处：

将以下内容粘贴到浏览器控制台：

var children = null
chidren.map(i => {return i}) // => VM370:1 Uncaught TypeError: Cannot read property 'map' of null
React.Children.map(children, i => {return i;}) // return null

这是结果：

因此，React.Children.map将处理children为null或undefined的情况。

- Khanh Pham

---

感谢您发布答案。但请不要发布其他页面的链接。请在您自己的帖子中展示区别，并在那里进行解释。 - N8888

这是关于编程的内容，请将以下文本从英语翻译成中文。仅返回已翻译的文本：这是图片而不是其他页面，由于贡献点数不足，我无法发布内联图片。 - Khanh Pham

Answer 3

据我所知，对于您的操作，实际上没有什么区别。但是，React.Children 提供了处理 this.props.children 的工具。在使用 map 时，文档中有一条评论可能会很有趣：（参见文档）

如果 children 是一个带键的片段或数组，它将被遍历。

所以他们的实现似乎不仅仅是使用 Array.prototype.map 所做的那么简单。

您可以阅读其他React.Children 提供的功能，但它们似乎主要提供了方便的函数，使您无需担心遍历可能还有子元素等问题。

- Ali

---

你的答案似乎已经过时了，它说：“如果子元素是片段，则它将被视为单个子元素而不会被遍历。” - Karamell