reactjs - 在 Typescript 中 react 子组件

Question

我们有一些复杂的组件组合，我在使它们类型安全时遇到了麻烦。根据下面的代码，我希望 Typescript 能够为 Menu.Item 提供类型。或 Menu.Link ，但它不是出于某种原因，它们被推断为“任何”(当您将其包装在 JSX 中时，它会被细化为 JSX.Element<any>。知道为什么会发生这种情况吗？

import * as React from 'react';

type RootFunctionComponent<OwnProps, SubComponents> = React.FunctionComponent<OwnProps> & SubComponents;

interface ItemProps {
    text: string;
};

interface LinkProps {
    href: string;
}

const Item: React.FunctionComponent<ItemProps> = props => <div {...props} />;
const Link: React.FunctionComponent<LinkProps> = props => <div {...props} />;

interface MenuSubComponents {
    Item: React.FunctionComponent<;
    Link: typeof Link;
}

const Menu: React.FunctionComponent<{}, MenuSubComponents> & MenuSubComponents = props => <div {...props} />

Menu.Item = Item;
Menu.Link = Link;


const Test: React.FunctionComponent<{}> = () => {
    return <>
        <Menu>
            <Menu.Item text={false} />
            <Menu.Link />
        </Menu>
    </>
}

结果:

Answer 1

问题在于菜单类型定义:

React.FC<{}, MenuSubComponents>

正确的用法是:

React.FC<MenuSubComponents>

你可以在这里看到这个: https://codesandbox.io/s/condescending-lamarr-xjkcw