时间戳

首页 > 解决方案 > 将 ReactNode 数组传递给功能组件时出现类型检查错误

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

问题描述

我有一个组件将 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”

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

标签： reactjstypescripttypechecking

解决方案

如果您在解构属性上指定类型，则类型签名中也需要相同的结构，因此{ 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 游乐场

推荐阅读