检测Typescript中的数组长度

Question

我有一个组件，它可以接受React子节点作为节点或节点数组。我希望能够检测子节点是否是一个节点数组，但我得到以下Typescript错误：

TS2339:类型“string | number | true |{}元素上不存在属性“length”

在Typescript中是否有一种方法可以检测子项是否有长度？谢谢

import React from 'react';

interface Props {
  children: React.ReactNode | React.ReactNode[];
}

const SampleComponent: React.FC<Props> = ({ children }) => {
  if (children && children.length) {
    return children.map((child) => (
      <div>{child}</div>
    ));
  }

  return children;
};

export default SampleComponent;




Answer 1

定义了像constmybutton=（props:MyProps）这样的道具=

功能组件-为什么React。FC不鼓励？

Answer 2

[更新]

请使用React查看Ajeet Shah的回复。儿童API。

[原件]

让孩子们做出反应。在检查长度之前，按如下方式反应节点[]：

(children as React.ReactNode[]).length

您还可以创建一个类型谓词：

https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-类型谓词

Answer 3

有一个反应。儿童API，用于处理道具。子项（这是一种不透明的数据结构）。

而且，会做出反应。Children有count、map等方法。

if (React.Children.count(children)) {
  return React.Children.map(children, (child) => <div>{ ..todo.. }</div>)
}

它还支持TypeScript。因此，您不需要强制转换类型。