Question

我正在尝试在create-react-app

中导入我的课程

工作示例：

export default class HeaderView extends Component {
    render() {
        return (
            <div className="header-view">
                {this.props.children}
            </div>
        );
    }
}

import HeaderView from './HeaderView'

但是当我做的时候

export class HeaderView extends Component { }

然后

import { HeaderView } from './HeaderView'是undefined

我尝试了不同的方法，但没有一种方法有效。我得到的最近的是

export default { HeaderView }然后

import HeaderView from './HeaderView'是Object { HeaderView:.. }和 import {HeaderView} from './HeaderView'为undefined

Answer 1

您忘记在组件中进行扩展反应，您还需要为每个组件导入反应：

import React from "react";
export default class HeaderView extends React.Component {
  render() {
     return (
        <div className="header-view">
            {this.props.children}
        </div>
     );
   }
 }

然后

import HeaderView from './HeaderView.js'

应该有效。另请注意，我添加了文件扩展名.js或.jsx

我相信，只有在将组件添加为您安装到环境中的库或外部文件时，才会导入没有文件扩展名的组件。

import { HeaderView } from './HeaderView.js'

当它们是多个组件作为同一文件中的对象时使用。

查看此答案以解释导入： How to import part of object in ES6 modules

编辑：为了解决没有扩展程序的导入，您需要配置webpack以默认查找这些扩展名。

Answer 2

正如DirtyRedz所说，请确保包含从“反应”中导入React; 从“react-dom”导入ReactDOM

此外，将默认值添加到您的类组件例如：导出默认类Headerview扩展了React.Component {..} 当您在另一个文件中导入组件时，您不需要在{}中包含该组件。祝你好运

为什么我的ES6导入/导出不起作用？

2 个答案: