前言

环境React,Typescript。

某些场景下复合组件比多个组件更方便。比如antd的Menu、Menu.Item
讲解Typescript下复合组件接口声明问题

解决方案

1.创建一个Demo

import * as React from "react";

//父级接口
interface IDemoParent {
    demoParent?: string
}

//父级组件
const DemoParent: React.FC<IDemoParent> = (props) => (<div>我是父级组件</div>);

//子级接口
interface IDemoChildren {
    demoChildren?: string
}

//子级组件
const DemoChildren: React.FC<IDemoChildren> = (props) => (<div>我是子级组件</div>);

2.导出方案，我就直接写到注释里了


//转组件为接口
type DemoParentType = typeof DemoParent;

//新建一个接口，继承父组件类型接口
interface IProps extends DemoParentType {
    DemoChildren: typeof DemoChildren
}

//定义一个新的名称：并且强制断言，不然ts会报错
const Parent: IProps = DemoParent as IProps;

//赋值
Parent.DemoChildren = DemoChildren;

//导出
export {DemoChildren}
export default Parent;

3.使用

   return (
        <div>
            <Parent/>
            <DemoChildren />
             //此处不会有声明，需要 const {DemoChildren} = Parent; 导出使用
            <Parent.DemoChildren/>
        </div>
    )