时间戳

首页 > 解决方案 > 直接使用 children 道具和使用 React.Children.toArray 方法的区别

javascript - 直接使用 children 道具和使用 React.Children.toArray 方法的区别

问题描述

我正在玩React.Children和属性，我发现使用和使用children之间没有区别我还能够通过直接使用它的索引来从孩子道具渲染特定的孩子，并将其视为普通数组children.filter()React.Children.toArray(children).filter

所以我想知道这两种方法有什么区别吗？如果我可以直接将道具与数组方法一起使用，为什么反应团队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>
  );
}

标签： javascriptreactjs

解决方案

如果您查看此处的文档：https ://reactjs.org/docs/react-api.html#reactchildren ，您会注意到一些事情。

  1. React.Children处理null和undefined。如果子项为 null 或未定义，则调用children.filter()将出错。

  2. 它与<Fragment>孩子打交道

  3. 包括辅助函数，例如.only()提供比常规数组更多的反应特定功能。

  4. toArray()更改键以保留嵌套数组的语义。

因此，在您的具体情况下，您可能不会注意到任何差异。但是，即使您确定它children始终是一个可用的数组，使用React.children. 这是因为它抽象了孩子的概念，以便您的代码更具未来性（对代码的更改以及对自身做出反应的潜在更改）。

推荐阅读