Почему попытки доступа к имени класса компонента React приводят к ReferenceError? - PullRequest
Новая
       34

Почему попытки доступа к имени класса компонента React приводят к ReferenceError?

0 голосов
/ 21 апреля 2019

Вот мой компонент React в index.js: 

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/,, я получаю желаемый вывод: «Привет, Мир!", на веб-странице.Теперь я щелкаю правой кнопкой мыши на странице, выбираю «Осмотреть», чтобы открыть Chrome DevTools.В консоли я набираю App, но я получаю сообщение об ошибке. 

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

Почему App не определено?

Когда я проверяю «Просмотр источника страницы», я вижу эти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 должно быть определено на этой странице, верно?Почему я все еще получаю ReferenceError, когда пытаюсь получить к нему доступ в консоли DevTools?

Я знаю, что могу использовать React DevTools для отладки компонентов React.Но не об этом мой вопрос.Мой вопрос касается объема и времени жизни класса, который я определил в React.Почему определение класса App не работает при загрузке страницы?

1 Ответ

3 голосов
/ 21 апреля 2019

Набрав «App» в вашей консоли, вы попытаетесь получить доступ к window.App, но window.App не существует. App - это переменная, которая является локальной для модуля, в котором она определена. Ваш код передается через веб-пакет, но после переноса он все еще является локальной переменной, просто он вызывается замыканием, а не модулем.

У вас есть варианты, хотя. Попробуйте установить точку останова в коде с помощью инструментов разработчика браузера. Пока он находится в режиме паузы, ввод в консоли должен иметь доступ к локальным переменным, которые находятся в области видимости в том месте, где он был приостановлен.

...