将 ReactNode 数组传递给功能组件时出现类型检查错误答案

【问题标题】：Typecheck error while passing an array of ReactNode to a functional component将 ReactNode 数组传递给功能组件时出现类型检查错误
【发布时间】：2021-04-22 10:53:32
【问题描述】：

我有一个组件将 ReactNode 数组传递给另一个组件。

    const getOptions = (links: Array<Links>): Array<ReactNode> => {
        const options: Array<ReactNode> = [];
        links.map((link): void => {
            options.push(
                <Link
                    href={link.path}
                    key={link.page}
                >
                    {link.label}
                </Link>
            );
        });
        return options;
       };
<<<<<some code>>>>>>
<Dropdown dropDownOptions={getOptions(dropdownLinks)} />

我的下拉组件：

const Dropdown = ({ dropDownOptions }: any): JSX.Element => {}

所以我遇到的问题是，当我使用任何作为下拉选项类型时，我会收到警告：

对象模式参数应使用非任何类型输入

但是当我使用 Array 作为类型时，我得到以下错误：

类型“any[]”上不存在属性“dropDownOptions”

我不知道如何解决这个问题。

【问题讨论】：

我认为当您执行 { dropDownOptions }: any[] 时，您是在说对象 { dropDownOptions } 是 any[]`` 的数组。这是错误的，它是一个对象而不是一个数组。
@Magofoco 但我传递的道具是一个数组。我不确定在这里使用什么类型是正确的。

标签： reactjs typescript typechecking

【解决方案1】：

如果您在解构属性上指定类型，您也需要在类型签名中使用相同的结构，因此需要使用它而不是 { dropDownOptions }: Array<ReactNode>

const Dropdown = ({ dropDownOptions }: { dropDownOptions: Array<ReactNode> }) => (
  <div>...</div>
)

或者只是

const Dropdown = ({ dropDownOptions }: { dropDownOptions: ReactNode[] }) => (
  <div>...</div>
)

作为不相关的说明，代码使用map，但它不是实际的映射，因为它构建具有副作用的结果并丢弃返回的数组。您可以像这样将其重写为纯函数式映射：

const getOptions = (links: Array<Links>) =>
  links.map(link => (
    <Link href={link.path} key={link.page}>
      {link.label}
    </Link>
  ))

返回类型签名将全部由编译器推断。

TypeScript playground

【讨论】：