javascript - 基于 ES6 的多个(React)Node.JS 模块导入有问题

Question

我一直致力于 React 项目，但在尝试使用 ES6 导入多个导出的 React Node 模块时遇到问题。

这是我的代码:

我应该能够毫无问题地从 hello 文件夹中包含 AddFriendInput 和 FriendList。但是当 webpack/babel 编译时我得到这个错误:

ERROR in ./src/common/containers/Menu/indexRender.js
Module not found: Error: Cannot resolve 'file' or 'directory' ../../hello in /Users/markpaul/Documents/projects/patient-portal-app/src/common/containers/Menu
 @ ./src/common/containers/Menu/indexRender.js 122:13-35

我的 AddFriendInput.js 文件的内容是这样的:

import React, { Component, PropTypes } from 'react';

export default class AddFriendInput extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: this.props.name || ''
    };

  }
  render() {
    return (
      <div>

      </div>
    );
  }
}

我使用带有 babel 的 webpack 来转换我的文件。我的 Babel 配置是:

{
  "presets": ["react", "es2015", "stage-1"]
}

我让它工作的唯一方法是这样做:

import AddFriendInput from '../../hello/AddFriendInput/AddFriendInput';
import FriendList from '../../hello/FriendList/FriendList';

但如您所见，这看起来很糟糕。

有人可以帮忙吗

提前致谢。

Answer 1

创建home/index.js

import AddFriendInput from './AddFriendInput'
import FriendList from './FriedList'

export { AddFriendInput, FriendList }

旧答案:

重命名 AddFriendInput.js 为 index.js 然后你可以这样导入:

import AddFriendInput from '../../hello/AddFriendInput'