类型“FC<IPops>”不可分配给类型

Question

目前我正在将 TypeScript 集成到我的 React 项目中，但遇到了问题。
错误是：

HeaderContainer 组件是：

import React, {useEffect, useMemo, useState} from "react";

import {useSelector} from "react-redux";

import HeaderUI from "../ui/HeaderUI";
import LogoContainer from "../../common/Logo/functional/LogoContainer";
import BalanceInformationContainer from "./BalanceInformation/functional/BalanceInformationContainer";
import RenderEmptyContainer from "../../common/RenderEmpty/functional/RenderEmptyContainer";
import AccountContainer from "./Account/functional/AccountContainer";

import {getHeaderViewUserSelector} from "../../../redux/user/userSelectors";

import styles from "./Header.module.css";

interface OptionProps {
    className?: string,
    target?: string,
    href?: string,
}

interface ILogoProps {
    className: string,
    target: string,
    href: string,
}

interface IBalanceInformationProps {
    balance_wdx: number,
    wdxPrice: number,
    usdtPrice: number,
}

interface IAccountProps {
    username: string,
}

export type HeaderOptionType = {
    id: number,
    component: React.FC<ILogoProps | IBalanceInformationProps | IAccountProps | {}>,
    props: OptionProps,
}

const HeaderContainer: React.FC = () => {
    const user = useSelector(getHeaderViewUserSelector);

    const headerOptions = useMemo<HeaderOptionType[]>(() => ([
        {
            id: 0, component: LogoContainer, props: {
                className: styles.Logo,
                target: "_blank",
                href: "http://wordlex.finance/"
            }
        },
        {id: 1, component: RenderEmptyContainer, props: {}},
        {
            id: 2, component: BalanceInformationContainer, props: {
                balance_wdx: user ? user.balance_wdx : 0,
                wdxPrice: user ? user.wdxPrice : 0,
                usdtPrice: user ? user.usdtPrice : 0
            }
        },
        {id: 4, component: AccountContainer, props: {username: user ? user.username : "Loading..."}},
    ]), [user]);

    return <HeaderUI headerOptions={headerOptions} classes={styles}/>;
}

export default HeaderContainer;

在 Logo 的组件 IProps 中，我与 ILogoProps 界面中的相同。
我认为错误在那里：
组件：React.FC，

LogoContainer 是（四个组件之一）：

import React from "react";

import LogoUI from "../ui/LogoUI";

interface IProps {
    href: string,
    className?: string,
    target?: string,
}

const LogoContainer: React.FC<IProps> = (props) => {
    return <LogoUI {...props}/>;
}

export default LogoContainer;

请您描述一下是什么问题？

Answer 1

在您的 IProps、className 和 target 中，道具是可选的，但在您的 ILogoProps 中，它们是必需的。请让它们完全相同。

此外，最好不要尽可能多地复制代码，因此更好的解决方案是在根级文件夹中添加一个interfaces.ts 文件，例如constants 或config，并且一次定义接口并在多个地方重用它。