React 的 Typescript 编译错误 - 类型“元素”不可分配给类型“FunctionComponent<{}>”

Question

使用的原始代码-

import { Create } from '@material-ui/icons';

<DroppableFolder
          count={draftsCount}
          sidebarOpen={open}
          folderId={FolderType.Drafts}
          Icon={Create}
          name="Drafts"
          type="folder"
          url={Communication.drafts}
/>

这是界面-

export default interface DroppableFolderProps {
  count?: number;
  folderId: string;
  label?: Label;
  Icon?: React.ComponentType;
  name?: string;
  type: LinkType;
  url: string;
  sidebarOpen?: boolean;
}

关于用这个 React 功能组件替换 Icon={Create}，

const DraftIcon = <Icon icon="draft-icon" title="Draft Icon" size="medium" />;

<DroppableFolder
          count={draftsCount}
          sidebarOpen={open}
          folderId={FolderType.Drafts}
          Icon={DraftIcon}
          name="Drafts"
          type="folder"
          url={Communication.drafts}
/>

我收到此错误 -

type 'Element' is not assignable to type 'ComponentClass<{}, any> | FunctionComponent<{}> | undefined'.
  Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
    Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | null'.

对于Icon={DraftIcon}这一行。

有什么建议吗？

Answer 1

试试这个，把 DroppableFolderProps 中的 Icon 属性改成 IconProps 类型

interface DroppableFolderProps{
  Icon:IconProps
}

将 const DraftIcon 更改为函数式组件

const DraftIcon = ()=> <Icon icon="draft-icon" title="Draft Icon" size="medium" />;

并将 DraftIcon 传递给 DroppableFolderProps 组件

<DroppableFolder Icon={ <DraftIcon/> } />