使用webpack导入Index.js模块

Question

我的代码组织如下：

其中，

Resources / ActionLog / Components / 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的默认导出导出为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