如何在 React/Typescript 中使用導入的類型

Question

import { IoLogOutOutline } from 'react-icons/io5';    
import { IconType } from 'react-icons';

如何使用導入的類型“圖標類型”？

(alias) type IconType = (props: IconBaseProps) => JSX.Element

將圖標類型設置為 JSX.Element 時，我可以將圖標作為道具傳遞。

type LinkProps = {
    to: string;
    icon?: JSX.Element;
};

<Link to="logout" icon={<IoLogOutOutline />} />

但是，如果我將其設置為“圖標類型”，則會返回錯誤：

"Type 'Element' is not assignable to type 'IconType'.
  Type 'ReactElement<any, any>' provides no match for the signature '(props: IconBaseProps): Element'.ts(2322)"

Answer 1

IconType是一個 function 類型，它返回一些道具並期望一個元素，因此請嘗試將 function 傳遞給圖標道具icon={() => <IoLogOutOutline />}

import { IoLogOutOutline } from 'react-icons/io5';    
import { IconType } from 'react-icons';

type LinkProps = {
    to: string;
    icon?: IconType;
};

function Link(props: LinkProps) {
    return ...;
}

<Link to="logout" icon={() => <IoLogOutOutline />} />