为什么会出现“意外使用'location'no-restricted-globals”的问题?

时间:2019-01-21 03:38:01

标签: javascript reactjs react-router eslint

在我的reactjs代码中,我得到了:

const {
  children,
  location: { pathname },
} = this.props;

let path = location.pathname;

还在此组件中使用React Router模块。如何解决此错误?

3 个答案:

答案 0 :(得分:5)

例如,在大多数/所有Web浏览器中,location.reload()是其完全限定名称window.location.reload()的别名。

您可以通过打开开发工具窗格控制台并输入以下内容在浏览器中对其进行测试:

location.reload()

window.location.reload()

两者都会触发页面刷新。

ES Lint警告实际上是在警告您您的代码正在使用此别名,因此在将来,代码可能会突然中断,这可能是因为别名已弃用或您的工具链中的某些部分在运行需要使用window.

的方式

在JavaScript中,由于可变阴影和闭包,可能会发生奇怪的事情。可能会在之后声明location引用,然后对诸如location.reload()之类的引用将被诸如“无此类方法重新加载”之类的消息破坏。如果您称呼标准名称window.location.reload(),则不太可能发生这种情况。

答案 1 :(得分:2)

您应该尝试使用此代码

const {
  children,
  location: { pathname },
} = this.props;

let path = pathname;

您的location变量尚未在此块代码中定义,因此eslint认为您使用了全局变量

答案 2 :(得分:0)

因为eslint被检测到locationwindow的元素。因此,请尝试重命名props

const {
  children,
  myLocation: { pathname },
} = this.props;

let path = myLocation.pathname;

参考: