Question

我已经用React和TypeScript创建了一个小的组件库。现在，我想将导出的组件重新组织到名称空间中，正如我在ant.design中看到的那样。

在ant.design中，您可以执行以下操作：

import { Table } from 'antd';

<Table>
    <Table.Column ... />
</Table>

我想做同样的事情，因为上下文，我的某些组件需要成为其他组件的子组件。当前看起来像这样：

import { DSVImport, DSVTablePreview, DSVTextareaInput } from './';

<DSVImport columns={columns}>
  <DSVTextareaInput />
  <DSVTablePreview />
</DSVImport>

这是通过以下index.ts完成的：

// composite
export * from './DSVImport';

// components
export * from './components/inputs/DSVTextareaInput';
export * from './components/previews/DSVTablePreview';

// models
export * from './models/column';

如何实现这样的目标（遵循eslint建议）？

import { DSVImport } from './';

<DSVImport columns={columns}>
  <DSVImport.DSVTextareaInput />
  <DSVImport.DSVTablePreview />
</DSVImport>

Tl; dr

到目前为止，我是通过向蚂蚁学习来尝试的。

import { DSVTextareaInput } from './components/inputs/DSVTextareaInput';

function DSVImport() {}

DSVImport.TextareaInput = DSVTextareaInput;

export default DSVImport;

这不会引发错误，但是DSVImport必须是默认导出。 DSVImport也是函数而不是组件。

使用TypeScript和React将导出重组为名称空间或模块

Tl; dr

0 个答案: