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];
  }
}

结果是一样的。

有谁知道有什么不同？

或者反应团队发布此API的目的是什么。

谢谢。

Answer 1

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

如果子项是一个键控片段或数组，它将被遍历

因此，与刚刚使用Array.prototype.map。

相比，他们的实施似乎做得更多

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

Answer 2

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

React.Children.map

对包含在此setArg中的子代中包含的每个直接子代调用一个函数。如果children是一个数组，则将遍历它，并且将为数组中的每个children调用该函数。如果children为null或未定义，则此方法将返回null或未定义，而不是数组。

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

Answer 3

请看一下这个例子，看看有什么不同

将此粘贴到控制台浏览器：

BStr

结果是：result

因此React.Children.map将处理child为null或未定义的情况

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

3 个答案: