Question

在我的react组件目录中，我在这里设置了index.js.

import App from './App';
import Main from './Main/Main';
import Best from './Main/Best';
import Club from './Main/Club';
import Post from './Main/Post';

import Sidebar from './Sidebar/Sidebar';

export { App, Main, Best, Club, Post, Sidebar };

在其他js中的用法，

import {
    App,
    Main,
    Best,
    Club,
    Post,
    Sidebar
} from '../scripts/Containers/index';

但每当我制作这样的组件时，我是否应该在那里编写import / export语句index.js？有什么神奇的方式吗？

请帮我解决这个问题！

更新（使用@Bergi）

我修改了这样，效果很好。

export { default as App } from './App';

export { default as Header } from './Header/Header';

export { default as Main } from './Main/Main';
export { default as Best } from './Main/Best';
export { default as Club } from './Main/Club';
export { default as Post } from './Main/Post';

export { default as Sidebar } from './Sidebar/Sidebar';

但这没有用

export * from './App';

export * from './Header/Header';

export * from './Main/Main';
export * from './Main/Best';
export * from './Main/Club';
export * from './Main/Post';

export * from './Sidebar/Sidebar';

为了使用上面的代码，我在组件

中更改了它

export default class Header extends Component {
    constructor(...args) {
        super(...args);

    }
}

到

export class Header extends Component {
    constructor(...args) {
        super(...args);

    }
}

我删除了export default模块导出！并运作第二种出口方式（不是第一种）

谢谢@Bergi：）

但我认为动态导入/导出无法使用。

也许这是我认为最好的方式。

如何在ES6中动态导入和导出

更新（使用@Bergi）

0 个答案: