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找不到命名空间“组件”。但是，这有效：

// 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一起使用的原因是由于使用导入，您将其转换为module（即使您使用的是命名空间关键字），其中“组件”未导出。我建议尽量不要使用名称空间，请参阅here，and here

Answer 2

index.ts

import { A } from './A.tsx';
import { B } from './B.tsx';

export const C = {
  A,
  B,
}

使用：

import { C } from './index';

<C.A/>
<C.B/>

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"],
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

打字稿版本3.8.3

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

2 个答案: