简化 React 组件导入

Question

我尝试简化我的组件导入，来自：

import Component1 from './components/Component1'
import Component2 from './components/Component2'

类似的事情：

import {Component1, Component2} from './components/'

我试图在组件目录中创建一个 index.js 文件（在这个 post 之后）：

export * from 'Component1';
export * from 'Component2';

但我仍然遇到 "Module not found" 错误。有什么线索吗？

谢谢，宝珠

Answer 1

您需要添加一个点来表示它是本地文件，而不是 npm 发布的模块。像这样更改您的导出行

export * from './Component1';

UPD 要解决命名导入的下一个问题，您需要为从 Component1.js 文件

中的默认导出命名

export Component1 from './Component1';

关注这个

Answer 2

你确定路径正确吗？尝试指定绝对路径，如：

从“/home/your_username/components/Component1”导入 Component1 从“/home/your_username/components/Component2”

导入 Component2

您可以从终端使用命令 "pwd" 查看目录的正确路径。

确保有访问目录和文件的权限。您可以尝试运行以 root 身份运行该程序。

Answer 3

从 Component1 和 Component2 而不是 * 导出组件时，您应该将其导出为对象 -

//In Component1.js(x)
export { Component1 };

和

//In Component2.js(x)
export { Component2 };

有了这个你应该可以像这样导入：

import { Component1 } from '...';
import { Component2 } from '...';

Answer 4

是的，我对我的导入做同样的事情，当它们从同一个文件导出时会好很多。这是我如何实现这一目标的示例：

components/index.js

import Component1 from './Component1';
import Component2 from './Component2';

module.exports = {
    Component1,
    Component2
};

然后导入它们

import { Component1, Component2 } from './components';

如果您使用的是 Webpack，请查看 webpack resolve 以摆脱您的相对路径。

使用 Webpack 解析的示例

//Will work at any nested level
import { Component1, Component2 } from 'components';

澄清一下，Component1 和 Component2 应该使用默认导出

export default class Component1 extends React.Component {...}

或

var Component1 = createReactClass({...});
module.exports = Component1;

Simplify React Components Import