时间戳

首页 > 解决方案 > 来自配置的 React 和 Typescript 动态组件

javascript - 来自配置的 React 和 Typescript 动态组件

问题描述

我正在尝试使用 reactjs 和 typescript 构建一个动态菜单系统。

我的配置如下所示：

import {TableIcon} from "@heroicons/react/solid";

type route = {
    icon: React.ReactNode,
    path: string,
    title: string,
}

export const navRoutes = () : route[] => {
    return [
        {
            icon: TableIcon,
            path: '/',
            title: 'Home'
        },
    ]
}

在我的导航组件中，我正在做

{navRoutes().map((item) => (
    <a key={item.title} href={item.path}>
        <item.icon /> // also tried {item.icon}
        {item.title}
    </a>
))}

我收到一个错误TS2604: JSX element type 'item.icon' does not have any construct or call signatures.

我在没有按预期工作的打字稿的情况下做了类似的事情——谁能告诉我我做错了什么？

标签： javascriptreactjstypescripttailwind-css

解决方案

React.ReactNode是渲染组件的类型。例如：

const a: React.ReactNode = <TableIcon />

如果你想传入一些渲染的JSX，那就是你会使用的。但听起来你想传入一个没有道具的功能组件，然后将其渲染。

React.FC是没有道具的反应功能组件的通用类型。这可能就是你想要的类型。

type route = {
    icon: React.FC,
    path: string,
    title: string,
}

操场

推荐阅读