如何给组件写一个内置的组件？

背景

当我们用 React + ts 开发组件的时候，有时候会将子组件进行拆分，然后提供给用户使用。就像下面这样：

import {Menu} from 'antd';
const {Item} = Menu;

如何实现这样的效果呢？

实现

假设我们有这样的目录结构

package/Main
├─ index.tsx
├─ Main.tsx
├─ MainChild.tsx
└─ style
    └─ index.less

其中 Main 使我们主要导出的组件，MainChild 是在 Main 内部使用的组件。现在想这样使用：

import {Main} from 'package';

// 这样引入MainChild
// 而不是 import {MainChild} from 'package';
const {MainChild} = Main;

export default () => (
    <Main>
        <MainChild />
    </Main>
)

这里分两种情况：

1. Main 是 class 组件

   • Main.tsx

   import MainChild from './MainChild';
   
   class Main {
       static MainChild: typeof ErrorMsg = MainChild;
       
       // Main 组件代码
   }
   
   export default Main;
   

   • index.tsx

   export default './Main.tsx';
   

2. Main 是函数组件

   • Main.tsx

   import React from 'react';
   
   export type MainProps = {};
   
   const Main: React.FC<MainProps> = props => {
       // Main 组件代码
   }
   
   export default Main;
   

   • index.tsx

   import MainInternal, { MainProps } from './Main';
   import MainChild, { MainChildProps } from './MainChild';
   
   type MainInternalProps = typeof MainInternal & {
       MainChild: typeof MainChild;
   }
   
   const Main = MainInternal as MainInternalProps;
   
   Main.MainChild = MainChild;
   
   export default Main;
   export { MainProps, MainChildProps };
   

参考

• Ant-Design