reactjs - TypeScript:将 React 组件导出为命名空间的一部分

Question

我有以下文件:

AutosuggestComponent.tsx:

import * as React from 'react';

interface AutosuggestProps {
    ...
}    

interface AutosuggestState {
   ...
}

export default class Autosuggest extends React.Component<AutosuggestProps, AutosuggestState> {
    ...
}

我想在 ConsumerComponent.tsx 中像这样导入 Autosuggest 组件:

import Autosuggest = Components.AutoSuggest;

我如何导出 AutosuggestComponent.tsx 以使其工作？

我试过像这样创建一个 Autosuggest.ts:

import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = AutosuggestComponent;
}

这不起作用。然后 ConsumerComponent 找不到命名空间“Components”。
但是，这有效:

// import AutosuggestComponent from './AutosuggestComponent';

namespace Components {
    export const Autosuggest = { dummyValue: "test" }
}

一旦我注释掉导入，ConsumerComponent 就能够找到命名空间。为什么？

有没有办法解决这个问题？

Answer 1

您可以通过以下方式构建代码来达到所需的行为:

在所有组件所在的文件夹中添加名为 index.ts 的额外 ts 文件:

export * from './Autosuggest';
export * from './Combobox';

然后从你的 ConsumerComponent.tsx 消费它:

import * as Components from './components/index';
import Autosuggest = Components.AutoSuggest;

不使用 import 的原因是因为通过使用 import 你把它变成了 module (即使您使用的是命名空间关键字)其中不导出“组件”。我建议尽量不要使用命名空间，参见 here , and here