在 index.js 中重命名导出默认值

Question

我有一个名为TModal的组件，看起来像这样

const TModal = () => {}

export default TModal

它位于src/components/Modal/Modal.js

在它旁边，有一个index.js

这就是 index.js 的作用：

export { TModal as Modal } from './Modal'

然后在我项目的某个地方，我想像这样导入 Modal

import { Modal } from 'components/Modal'

但我不断得到

Attempted import error: 'Modal' is not exported from 'components/Modal'

有什么问题？

---

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es6",
    "module": "commonjs",
    "jsx": "preserve",
    "paths": {
      "*": ["./*"]
    }
  },
  "include": ["src"]
}

结构

src
- components
-- Modal
--- index.js
--- Modal.js
- layouts
-- Auth
--- Auth.js

例如，我想在Auth.js中使用Modal

Answer 1

由于您的 Modal.js 导出默认值，因此您的index.js应编写如下

import Modal from './Modal';
export { Modal };

Answer 2

看起来您没有选择您只是指向 Modal 目录的文件 (Modal.js)。 如果这是问题，这应该解决它。

import { Modal } from 'components/Modal/Modal'

Answer 3

问题在于TModal 。 当您从 js 文件中导出TModal时，请删除export关键字。 一切都会好起来的。 帮助它有帮助。

const TModal = () => {}
export TModal