使用导出默认值时反应导入错误答案

【问题标题】：React import error when using export default使用导出默认值时反应导入错误
【发布时间】：2020-02-13 22:00:43
【问题描述】：

我有一个

menu-item.component 在src/components/menu-item/menu-item.component.jsx
directory.component 在src/components/directory/directory.component.jsx。

在menu-item.component:

import React from "react";

import withRouter from "react-router-dom";

import "./menu-item.styles.scss";

export const MenuItem = ({ title, imageUrl, size }) => (
  <div className={`${size} menu-item`}>
    <div
      className="background-image"
      style={{
        backgroundImage: `url(${imageUrl})`
      }}
    />
    <div className="content">
      <h1 className="title">{title.toUpperCase()}</h1>
      <span className="subtitle">Alışverişe Başla</span>
    </div>
  </div>
);

// export default MenuItem;

这样，directory.component.jsx 中的导入语句 import { MenuItem } from "../menu-item/menu-item.component"; 运行良好。当我从函数定义中删除 export 并在底部添加 export default MenuItem; 时，npm start 失败并显示：

编译失败。

./src/components/directory/directory.component.jsx 尝试导入错误：“MenuItem”未从“../menu-item/menu-item.component”导出。

我是新来的反应，并遵循教程中的确切代码，它在视频中运行良好。为什么会失败？

【问题讨论】：

详细答案请看这里，希望对stackoverflow.com/questions/47619405/…有帮助
我明白了，抱歉我已经搜索过了，但没有看到这个答案。谢谢。

标签： reactjs

【解决方案1】：

试着去掉括号

import MenuItem from "../menu-item/menu-item.component"

当您执行“导出默认值”时，您不需要在导入时指定名称以获得默认导入（例如，您可以将其作为 Item 或 MenuI 导入，但始终以大写开头，让React 知道它仍然是一个组件）；

另外，删除您正在使用的 const 声明之前的 export export default

【讨论】：