使用Webpack的React组件和容器的特定文件名

Question

我想知道如何将我的组件和容器打字稿文件从通用index.tsx重命名为更具体的mycomponent.tsx，以改进项目导航。

目前目录结构如下：

app/ containers/ container1/ index.tsx style.css container2/ index.tsx style.css

我想改为：

app/ containers/ container1/ container1.tsx style.css container2/ container2.tsx style.css

我已经尝试了一些天真的重命名和重命名/导入index.tsx等内容，但这似乎总是打破我的所有导入。

Answer 1

所以我们有一个非常类似的情况，我们已经转移到这样的

app/
    containers/
        container1/
            container1.jsx
            index.jsx
            style.css

index.jsx看起来像这样

import Container1 from './Container1 '
export default Container1 

然后当我们需要导入它的

时

import Container1 from 'containers/Container1'

我们使用带有蓝图的redux-cli来执行我们的许多样板代码，因此这种模式构建到我们的组件和容器中。它还使导航更容易

Answer 2

以下列方式执行

app/
    containers/
        container1/
            index.ts
            container1.tsx
            style.css
        container2/
            index.ts
            container2.tsx
            style.css

并在每个index.ts中声明所有导出。将其视为组件API的接口。最简单的版本只能包含组件本身的导出。

export { default } from "./Container1";