时间戳

首页 > 解决方案 > 为什么在浏览器中运行 expo 应用程序时导出默认会引发错误？

javascript - 为什么在浏览器中运行 expo 应用程序时导出默认会引发错误？

问题描述

我有一个使用导出默认值的组件：

export default CategoryCard = (props) => {
    const {name, color, onPress } = props

    return (  ..my code

所以导入语句是import CategoryCard.

当我尝试使用 Expo Client 在浏览器中运行时，浏览器返回错误“ReferenceError: CategoryCard is not defined”

如果我更改 export default CategoryCard为export const CategoryCard 并更改import CategoryCard为，import { CategoryCard }则浏览器中的一切正常。

我理解这些陈述之间的区别，我在这里并不过分担心，因为这是一个最终不会在浏览器中运行的本机应用程序 - 但我只是好奇我自己了解这里发生了什么以及为什么浏览器没有'不喜欢导出默认值。

标签： javascriptreact-nativeexpo

解决方案

如果你有一些东西可以让你在没有const（或let）的情况下执行版本，那么它实现的模块不正确。线

export default CategoryCard = (props) => {

说“将此值（箭头函数）分配给已经存在的变量CategoryCard并将该值导出为该模块的默认导出。” 模块总是处于严格模式，所以如果你没有CategoryCard任何地方的声明，那就是引用错误。（如果没有严格模式，您可以通过分配给未声明的变量来创建全局变量，但这是一个坏主意™。:-)）

由于模块总是严格的，你需要它const或let在那里：

export default const CategoryCard = (props) => {
// −−−−−−−−−−−−^^^^^

给你错误的浏览器是正确的，因为它是一个 ReferenceError （在严格模式下）分配给一个未声明的标识符。

这并不是说您总是必须拥有constorlet或functionor 。您不需要，您可以将任意表达式的结果导出为默认导出。这是有效的代码，例如：classexport

export default 6 * 7;

因此，如果您在CategoryCard其他地方申报，您的出口将是有效的：

let CategoryCard;
export default CategoryCard = (props) => {

我当然不是建议这样做，只是指出它是有效的。:-)

推荐阅读