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

Question

我有以下文件：

自动建议组件.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 将其转换为模块（即使您使用的是命名空间关键字），其中未导出“组件”。我建议尝试根本不使用名称空间，请参阅此处和此处