这是我在 index.js 中的 React 组件:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render() {
return (
<div className="App">
<h1>Hello, World!</h1>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
当我使用 npm start 运行此命令并访问 http://localhost:3000/ ，我确实在网页中得到了所需的输出“Hello，World!”。现在我右键单击页面，选择“Inspect”以打开 Chrome DevTools。在控制台中，我输入 App 但收到错误。
> App
(x) VM154:1 Uncaught ReferenceError: App is not defined
at <anonymous>:1:1
为什么App没有定义？
当我检查“查看页面源代码”时，我看到这些源代码:
<!DOCTYPE html>
<html lang="en">
...
<script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>
当我查看 http://localhost:3000/static/js/main.chunk.js 的来源时，我在源代码中看到了这一点:
var App =
/*#__PURE__*/
function (_React$Component) {
...
所以 App 应该定义在这个页面中，对吗？当我尝试在 DevTools 控制台中访问它时，为什么仍然收到 ReferenceError ？
我知道我可以使用 React DevTools 来调试 React 组件。但这不是我的问题。我的问题是关于我在 React 中定义的类的范围和生命周期。为什么 App 类定义在页面加载时不存在？
最佳答案
在控制台中输入“App”将尝试访问 window.App，但 window.App 不存在。 App 是一个变量，它是定义它的模块的本地变量。您的代码由 webpack 转译，但转译后它仍然是一个本地变量，只是由闭包而不是模块强制执行。
不过你还有选择。尝试使用浏览器的开发人员工具在代码中设置断点。当它暂停在那里时，在控制台中输入应该能够访问暂停处范围内的局部变量。
关于javascript - 为什么尝试访问 React 组件的类名会导致 ReferenceError ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55779938/