reactjs - 在 index.js 文件中导出 React 组件时出错

Question

有一次，我能够在所有目录(组件、商店等)中创建一个 index.js 文件，该文件导出与此类似的所有组件，以便于访问:

export ComponentA from './ComponentA/ComponentA';
export ComponentB from './ComponentB/ComponentB';
export ComponentC from './ComponentC/ComponentC';

然后我会从像这样的另一个文件中仅导入我需要的那些类

import { ComponentA, ComponentC } from './components';

由于某种原因，现在我收到一个错误，但不知道为什么

ERROR in ./app/containers/index.js
Module build failed: SyntaxError: /Users/abritez/Documents/Projects/React-LTI-Toolprovider/app/containers/index.js: Unexpected token (1:7)
> 1 | export Widgets from './Widgets/Widgets';
    |        ^
  2 | 
    at Parser.pp.raise (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.expect (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:76:33)
    at Parser.pp.parseExportSpecifiers (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:766:8)
    at Parser.pp.parseExport (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:701:28)
    at Parser.parseExport (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:679:20)
    at Parser.pp.parseStatement (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:115:90)
    at Parser.parseStatement (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:621:22)
    at Parser.pp.parseTopLevel (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:30:21)
    at Parser.parse (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:70:17)
    at Object.parse (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/node_modules/babylon/lib/index.js:45:50)
    at Object.exports.default (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/helpers/parse.js:36:18)
    at File.parse (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:574:40)
    at File.parseCode (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:691:20)
    at /Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/pipeline.js:167:12
    at File.wrap (/Users/abritez/Documents/Projects/React-LTI-Toolprovider/node_modules/babel-loader/node_modules/babel-core/lib/transformation/file/index.js:639:16)
 @ ./app/routes.js 27:18-41

Answer 1

创建索引文件以使导入组件更容易时，您应该使用以下语法导出文件:

索引文件:

export { default as ComponentA } from "./ComponentA";

ComponentA 文件有一个导出

export default ComponentA;

如果您有一个包含多个导出的文件MultiComponents，例如:

export { ComponentB, ComponentC };

在索引文件中，您应该使用以下语法:

export { ComponentB, ComponentC } from "./MultiComponents";