类型类型的“元素”编译错误不能分配给键入“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;
}

在用此功能组件替换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中的图标属性更改为IconProps类型

interface DroppableFolderProps{
  Icon:IconProps
}

将const DraftIcon更改为功能组件

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

并将DraftIcon传递给DroppableFolderProps组件。

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