使用webpack导入Index.js模块

Question

我的代码组织如下:

哪里,

资源/ ActionLog /组件/ Layout.js

import React from 'react';

export default class Layout extends React.Component {
    render() {
        return (
            <p>Test</p>
        );
    }
}

资源/ ActionLog /组件/ index.js

export * from './Layout';

资源/ ActionLog/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Layout from './Components'; // <--- ISSUE HERE.

const app = document.getElementById('app');
ReactDOM.render(
    <Layout/>,
    app
);

为什么不Layout使用此设置导入？

如果我改变要阅读的行,

import Layout from './Components/Layout';

它工作正常,但Layout总是未定义!即使我尝试,

import Layout from './Components/index';

我使用webpack作为我的模块捆绑器,并且之前已经实现了类似的东西,我只是不明白为什么/如何这是不同的..

Answer 1

为什么不使用此设置导入布局？

Layout.js有默认导出.但是,export * from './Layout.js只会导出指定的导出(其中没有).换句话说,Components/Layout.js根本没有任何导出,因此无法导入任何内容.

但即使它确实命名了导出,也可以import Layout from './Components/index';导入默认导出,但Components/index.js没有默认导出.

有几种方法可以解决这个问题.最有意义的可能是导出Layout.js名为export 的默认导出Components/index.js.您可能会有多个文件,每个文件都导出一个组件.我假设Components/index.js应该导出所有这些组件的映射,在这种情况下你必须使用命名导出.

你必须做出的改变:

// in Components/index.js
export {default as Layout} from './Layout';


// in ActionLog/index.js
import {Layout} from './Components'; // use a named import