Question

我有一个

menu-item.component

src/components/menu-item/menu-item.component.jsx
directory.component中的{li} 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知道它仍然是一个组件）；

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

使用导出默认值时发生导入错误

1 个答案: