使用导出默认值时响应导入错误

Question

我有一个

• src/components/menu-item/menu-item.component.jsxmenu-item.component
• 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;

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

编译失败。

./src/components/directory/directory.component.jsx 尝试导入错误："菜单项"未从"../menu-item/menu-item.component'.

我是新手，可以做出反应并遵循教程中的确切代码，并且在视频中效果很好。为什么会失败？

Answer 1

尝试删除括号

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

当你做一个"导出默认"时，你不需要在导入时具体说明名称来获取默认导入(例如，你可以将其导入为 Item 或 MenuI，但总是以大写字母开头，让 React 知道它仍然是一个组件(;

此外，请删除您正在使用的 const 声明之前的exportexport default