在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的目的是什么。
谢谢你。
3条答案
按热度按时间nr9pn0ug1#
React组件的子节点是一个可能未定义或为空的节点。React.Children.map是一个帮助您处理不同情况的实用函数。
React.Children.map
对子级中包含的每个直接子级调用函数，并将此设置为thisArg。如果children是数组，则将遍历该数组，并为数组中的每个子级调用函数。如果children为null或undefined，则此方法将返回null或undefined，而不是数组。
您应始终使用React.Children.map遍历应用中的子级。children.map如果子级不是数组，则使用www.example.com会引发错误。
v1l68za42#
请查看此示例，以了解不同的
将其粘贴到控制台浏览器：
结果如下：
因此www.example.com将处理children为空或未定义的情况React.Children.map will handle the case when children is null or undefined
guykilcj3#
据我所知，对于您的操作来说，没有什么真实的的区别。但是，
React.Children提供了处理this.props.children的实用程序。对于map的使用，文档中有一条注解我认为可能很有趣：如果children是一个带键的片段或数组，则将遍历它
因此，它们的实现似乎比您刚刚使用
Array.prototype.map时做得多一点。您可以阅读
React.Children提供的其他功能，但看起来它们主要是提供方便的函数，因此您不必担心遍历可能有孩子的孩子等等。