在 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