简化React组件导入

Question

我尝试从以下位置简化我的组件导入：

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

这样的事情：

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

我试图在components目录中创建一个index.js文件（在这篇帖子import modules from files in directory之后）：

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

但我仍然没有找到＆＃34;模块＆＃34;错误。 任何线索？

谢谢， ORB

Answer 1

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

export * from './Component1';

<强> UPD 要解决名为import的下一个问题，您需要为Component1.js file

的默认导出命名

export Component1 from './Component1';

关注此answer

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

是的，我对我的导入做了同样的事情，当它们从同一个文件导出时更好。以下是我如何实现这一目标的一个例子：

组件/ index.js

?strptime

然后导入它们

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

module.exports = {
    Component1,
    Component2
};

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

使用Webpack解析的示例

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

只是为了澄清，//Will work at any nested level import { Component1, Component2 } from 'components'; 和Component1应使用默认导出

Component2

或

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