为什么尝试访问 React 组件的 class 名称会导致 ReferenceError？

Question

这是我在 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!"。现在我右键单击页面，select "Inspect" 打开 Chrome DevTools。在控制台中，我键入 App 但出现错误。

> App
(x) VM154:1 Uncaught ReferenceError: App is not defined
    at <anonymous>:1:1

为什么 App 没有定义？

当我检查 "View Page Source" 时，我看到这些来源：

<!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 中定义的 class 的范围和生命周期。为什么 App class 定义在页面加载时不生效？

Answer 1

在您的控制台中键入 "App" 将尝试访问 window.App，但 window.App 不存在。 App 是一个变量，它在定义它的模块中是本地的。你的代码被 webpack 转译，但在转译之后它仍然是一个局部变量，只是它是由闭包而不是模块强制执行的。

虽然你有选择。尝试使用浏览器的开发人员工具在代码中设置断点。当它在那里暂停时，在控制台中键入应该能够访问在暂停位置范围内的局部变量。

为什么尝试访问 React 组件的 class 名称会导致 ReferenceError？

Why trying to access the class name of a React component lead to ReferenceError?

javascript

scope

lifetime

ecmascript-6

reactjs