javascript - 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的目的是什么？

Answer 1

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

React.Children.map

Invokes a function on every immediate child contained within children with this set to thisArg. If children is an array it will be traversed and the function will be called for each child in the array. If children is null or undefined, this method will return null or undefined rather than an array.

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