使用索引文件导出.tsx模块

Question

在 React 应用程序中创建一个 index.js 文件是很常见的事情，其唯一目的是导出多个模块，以避免在其他组件上有太多导入语句。这可以通过以下方式完成：

索引.js

export { Credits } from './Credits.js';
export { SocialMedia } from './SocialMedia.js';

任何可能使用这些导出的模块：

import * as var_name from index.js

这非常好。它将导出包装到单个文件中。但是，当我将项目更改为 React with typescript 时，我发现.tsx文件无法像这样导出。下图是我将项目更改为 typescript 且扩展名变为后出现的错误.tsx

有没有一种方法可以“捆绑”导出.tsx具有上面所示结构的 React 文件？.tsx如果没有，集中文件导出的最简单方法是什么？

我的 webpack.config.js：

module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use: ["sass-loader"]
        }]
    }
};

Answer 1

您绝对可以使用相同的索引文件风格来对整个文件夹的导出进行分组。解决问题的最简单方法是省略文件扩展名（假设文件夹中只有一个“索引”文件）。

例如，假设您在“common/Example.tsx”中有一个组件：

import React from 'react'

export const Example = () => (<div>I'm an example component</div>)

然后，您可以将其导出到索引文件“common/index.tsx”中：

export { Example } from './Example'

并从其他地方导入它，例如“App.tsx”：

import { Example } from './common'