reactjs - 声明第三方库的已定义属性

Question

所以我正在使用一个名为 Evergreen 的 React UI 库，它不是类型化的。

我正在为我正在使用的组件写一个声明，当我遇到一点障碍时，菜单在 React 中的结构如下:

<Menu>
    <Menu.Group>
        <Menu.Item>Share...</Menu.Item>
        <Menu.Item>Move...</Menu.Item>
        <Menu.Item>Rename...</Menu.Item>
    </Menu.Group>
    <Menu.Divider />
    <Menu.Group>
        <Menu.Item intent="danger">Delete...</Menu.Item>
    </Menu.Group>
</Menu>

但是 Menu.Group、Menu.Item 和 Menu,Divider 会抛出错误，提示 Property 'Divider' does not exist在类型“typeof Menu”上

目前菜单的声明如下:

export interface IMenuProps extends ICSSProps {
    is?: any;
    onSelect?: any;
    icon?: any;
    children?: any;
    secondaryText?: any;
    appearance?: string;
    intent?: any;
    theme?: any;    
}
export class Menu extends React.PureComponent<IMenuProps> {}

我是 TS 的新手，所以完全不知道如何声明这些，我尝试添加类似 Divider: () => void; 的东西到 IMenuProps，我已经尝试将 public Divider: any; 添加到菜单类，但没有成功(不是我感到惊讶)!

如果有人能指出正确的方向，我将不胜感激!

谢谢!

Answer 1

想通了!点符号组件需要在类中定义为无状态功能组件，并通过它传递接口(interface)!这是一个片段，以备不时之需。

export class Menu extends React.PureComponent<IMenuProps> {

        public static Group: React.SFC<IMenuGroup>;
        public static Divider: React.SFC<IMenuDivider>;
        public static Item: React.SFC<IMenuItem>;

    }

    export interface IMenuGroup extends ICSSProps {
        title: string;
        group: string;
    }

    export interface IMenuDivider extends ICSSProps {
        title: string;
        divider: string;
    }

    export interface IMenuItem extends ICSSProps {
        title: string;
        item: string;
    }
}