迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 > React >

React 中 Attempted import error 'X' is not exported from 错误

作者:迹忆客 最近更新:2022/11/24 浏览次数:

当我们尝试导入指定文件中不存在的命名导入时,会出现 React.js“Attempted import error 'X' is not exported from”。 要解决该错误,请确保模块具有命名导出并且我们没有混淆命名导出和默认导出和导入。

下面是错误如何发生的示例。 这是一个导出函数的文件。

another-file.js

// 👇️ Note: default export
export default function sum(a, b) {
  return a + b;
}

是我们导入函数的 index.js 文件。

ndex.js

// ⛔️ Attempted import error: 'sum' is
// not exported from './another-file'.
// 👇️ Note: using named import
import {sum} from './another-file';

console.log(sum(5, 10));

请注意 ,在 another-file.js 中我们使用了默认导出,而在 index.js 文件中我们使用了命名导入。 这就是发生错误的原因。

要解决错误“Attempted import error 'X' is not exported from”,请确保:

  1. 在导入时将命名的导出包在花括号中
  2. 将值导出为默认导出时使用 default 关键字
  3. 每个模块最多只有 1 个默认导出,但可以有多个命名导出

以下是如何使用命名导出解决错误的示例。

another-file.js

// 👇️ Using named export
export function sum(a, b) {
  return a + b;
}

并在 index.js 文件中导入函数。

index.js

// 👇️ Using named import
import {sum} from './another-file';

console.log(sum(5, 10));

请注意 ,我们没有对命名导出使用默认关键字,而是将命名导入用花括号括起来。

每个文件可以有多个命名导出,但只能有一个默认导出。

以下是如何使用默认导出和导入解决错误的示例。

another-file.js

// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

现在我们在 index.js 文件中使用默认导入。

index.js

// 👇️ default import
import sum from './another-file';

console.log(sum(5, 10));

请注意 ,我们在使用默认导入时不使用花括号。

每个文件最多可以有 1 个默认导出。

如果要将变量导出为默认导出,则必须在第一行声明它并在下一行导出它。 我们不能在同一行上声明和默认导出变量。

index.js

// 👇️ default export
const example = 'hello world';

export default example;

我们也可以混合搭配,这里是一个例子。

another-file.js

// 👇️ default export
export default function sum(a, b) {
  return a + b;
}

// 👇️ named export
export const num = 15;

这是导入的代码。

index.js

// 👇️ default and named imports
import sum, {num} from './another-file';

console.log(sum(num, 10));

我们使用默认导入来导入 sum 函数,并使用命名导入来导入 num 变量。

要解决“Attempted import error 'X' is not exported from”错误,请与我们的 ES6 导入和导出保持一致。 如果一个值作为默认导出导出,则它必须作为默认导入导入,如果它作为命名导出导出,则必须作为命名导入导入。

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

Node.js 与 React JS 的比较

发布时间:2023/03/27 浏览次数:137 分类:Node.js

本文比较和对比了两种编程语言,Node.js 和 React。React 和 Node.js 都是开源 JavaScript 库的示例。 这些库用于构建用户界面和服务器端应用程序。

在 React 中循环遍历对象数组

发布时间:2023/03/18 浏览次数:124 分类:React

在 React 中循环对象数组: 使用 map() 方法迭代数组。 我们传递给 map() 的函数会为数组中的每个元素调用。 该方法返回一个新数组,其中包含传入函数的结果。 export default function App (

获取 React 中元素的类名

发布时间:2023/03/18 浏览次数:162 分类:React

在 React 中使用 event.target 获取元素的类名 获取元素的类名: 将元素上的 onClick 属性设置为事件处理函数。 访问元素的类名作为 event.currentTarget.className 。 export default function App () { cons

如何将 key 属性添加到 React 片段

发布时间:2023/03/18 浏览次数:152 分类:React

使用更详细的片段语法将 key 属性添加到 React 片段,例如 React.Fragment key={key} 。 更冗长的语法实现了相同的结果对元素列表进行分组,而不向 DOM 添加额外的节点。 import React from react

如何在 React 中删除事件监听器

发布时间:2023/03/15 浏览次数:203 分类:React

在 React 中删除事件监听器: 在 useEffect 挂钩中添加事件侦听器。 从 useEffect 挂钩返回一个函数。 当组件卸载时,使用 removeEventListener 方法移除事件监听器。 import {useRef, useEffect} from r

React 中在 map() 中使用条件跳出map

发布时间:2023/03/15 浏览次数:198 分类:React

React 中在 map() 中使用条件: 在数组上调用 map() 方法。 使用 if 条件,如果条件满足则显式返回。 否则返回不同的值或返回 null 以不呈现任何内容。 export default function App () { const arr =

在 React 中调用多个 onClick 函数

发布时间:2023/03/15 浏览次数:160 分类:React

在 React 中调用多个 onClick 函数: 在元素上设置 onClick 属性。 在事件处理函数中调用其他函数。 事件处理函数可以根据需要调用尽可能多的其他函数。 export default function App () { const s

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便