React.Children.map vs children.map，有什么不同？

Question

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

我很好奇 React.Children 和直接使用 children 之间有什么不同。

例如，如果我想操纵子内容，我可以用两种方法来实现。 例子

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

据我所知，对于您的操作而言，没有真正的区别。但是， React.Children 提供了处理 this.props.children 的实用程序。对于 map 的使用 ，文档 中有一条评论我认为可能很有趣：

如果 children 是键控片段或数组，它将被遍历

所以他们的实施似乎比你刚刚使用的要多一点 Array.prototype.map 。

您可以阅读其他 功能 React.Children 提供的内容，但它们在很大程度上似乎提供了便利功能，因此您不必担心遍历可能有孩子的孩子等等。

原文由 Ali 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

React 组件的子节点是一个可能未定义或为空的节点。 React.Children.map 是一个实用函数，可以帮助您处理不同的情况。

React.Children.map

对 this 设置为 thisArg 的子项中包含的每个直接子项调用一个函数。如果 children 是一个数组，它将被遍历并为数组中的每个孩子调用该函数。如果 children 为 null 或 undefined，此方法将返回 null 或 undefined 而不是数组。

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

原文由 kwrush 发布，翻译遵循 CC BY-SA 4.0 许可协议