使用ESLint编译的React项目中，如何判断全局变量存在性并规避报错？

针对你遇到的情况，有几个实用的解决办法：

方法1：给ESLint声明全局变量 #

直接在代码文件顶部加一行注释，明确告诉ESLint componentObj 是全局变量，它就不会再报错：

/* global componentObj */

如果这个全局变量在多个文件中都要用到，也可以在项目的ESLint配置文件（比如 .eslintrc.js 或 package.json 的eslintConfig字段）里全局声明：

// .eslintrc.js 配置示例
module.exports = {
  // 其他配置项...
  globals: {
    componentObj: 'readonly' // 标记为只读，若需要修改可改为'writable'
  }
};

方法2：将全局变量转为局部变量使用 #

先通过typeof判断把全局变量赋值给局部变量，后续操作都用这个局部变量，ESLint就不会识别为未定义：

const localCompObj = typeof componentObj !== "undefined" ? componentObj : null;
const message = localCompObj?.message || "Default message";

或者用更直白的条件判断写法：

let message;
const localCompObj = typeof componentObj !== "undefined" ? componentObj : null;
if (!localCompObj) {
  message = "Default message";
} else {
  message = localCompObj.message;
}

方法3：通过window对象访问全局变量（浏览器环境） #

如果这个全局对象是挂载在浏览器的window对象上的，直接用window.componentObj访问即可，ESLint默认识别window为全局对象，不会报错：

let message;
if (typeof window.componentObj === "undefined") {
  message = "Default message";
} else {
  message = window.componentObj.message;
}

内容的提问来源于stack exchange，提问作者MeltingDog