Question

我在玩React.Children和children属性时，发现使用children.filter()和使用React.Children.toArray(children).filter之间没有区别，我也可以渲染特定的孩子直接从儿童道具中获取索引，并像对待普通数组一样对待

所以我想知道这两种方法之间有什么区别吗？如果我可以将props直接与arrays方法一起使用，为什么React团队首先实现toString()方法

我尝试了console.log（）这两个方法，但我发现这两种方法之间没有冲突

const ChildrenContainer = (props) => {
  const { children, howMany } = props;
  console.log(children, '\n', Children.toArray(children));
  return (
    <div className="card-columns">
      {Children.map(children, (thisArg) => thisArg)}
    </div>
  );
}

Answer 1

如果您在此处查看文档：{{3}}，您会发现一些事情。

React.Children处理null和undefined。如果子级为null或未定义，则调用children.filter()会出错。
它处理<Fragment>个孩子
包括诸如.only()之类的辅助函数，这些函数提供比常规数组更多的特定于反应的功能。
toArray()更改键以保留嵌套数组的语义。

因此，在您的特定情况下，您可能不会注意到任何区别。但是即使您确定children始终是可用数组，使用React.children仍然是一个好习惯。这是因为它抽象出了子级概念，从而使您的代码更加适合将来使用（对于代码更改以及潜在的更改以做出反应）。

直接使用子级prop和使用React.Children.toArray方法之间的区别

1 个答案: