主页 / 问题 / 1328694
Accepted
Олег Верушкин
Asked:2022-09-15 19:06:39 +0000 UTC2022-09-15 19:06:39 +0000 UTC

键入由对象数组组成的 React 道具的问题

  • 772

有一个简单的组件可以接受来自对象数组的道具：

import React from 'react';
import {INavProps} from "../types";

const Nav: React.FC<INavProps[]> = props => {
    return (
        <nav>
            {
                props.map((item) => {
                    return <a key={item.id} href={item.link}>{item.title}</a>
                })
            }
        </nav>
    );
};

道具类型如下所示：

export interface INavProps {
    id: number,
    title: string,
    link: string,
}

当您尝试插入组件时，IDE 会自动分配所有原生 JS 数组方法，据说必须输入：

<Nav length={} toString={} toLocaleString={} pop={} push={} concat={} join={} reverse={} shift={} slice={} sort={} splice={} unshift={} indexOf={} lastIndexOf={} every={} some={} forEach={} map={} filter={} reduce={} reduceRight={} find={} findIndex={} fill={} copyWithin={} [Symbol.iterator]={} entries={} keys={} values={} [Symbol.unscopables]={} includes={} flatMap={} flat={}

TS2740：类型'{长度：任意；toString：任意；toLocaleString：任何；流行：任何；推：任何；连接：任何；加入：任何；反向：任何；班次：任何；切片：任何；排序：任何；拼接：任意；不移：任何；indexOf：任何；lastIndexOf：任何；每一个：任何；... 9 更多 ...; 复制范围内：任何；}' 缺少类型 'INavProps[]' 的以下属性：条目、键、值、包含和另外 4 个。

如何正确输入这样的道具？

reactjs

1 个回答

  1. Best Answer

    我们需要将数组元素的类型和道具的类型分开：

    export interface INavItem {
    id: number,
    title: string,
    link: string,
}
export interface INavProps {
    items: INavItem[],
}

    在组件中：

    const Nav: React.FC<INavProps> = props => {
    return (
        <nav>
            {
                props.items.map((item) => {
                    return <a key={item.id} href={item.link}>{item.title}</a>
                })
            }
        </nav>
    );
};
    • 1

相关问题