Подтвердить что ты не робот

Как можно сказать версию React, запущенную во время выполнения в браузере?

Есть ли способ узнать версию выполнения React в браузере?

4b9b3361

ОТВЕТЫ

Ответ 1

React.version - это то, что вы ищете.

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

Пример с React, импортированным как скрипт

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Ответ 2

Откройте Chrome Dev Tools или аналогичный и запустите require('React').version в консоли.

Это работает на таких сайтах, как Facebook, чтобы узнать, какую версию они используют.

Ответ 3

Нет уверенности в том, что какие-либо глобальные переменные ECMAScript были экспортированы, и html/css не обязательно указывает React. Так что смотрите в .js.

Способ 1: посмотрите в ECMAScript:

Номер версии экспортируется обоими модулями реагировать и реагировать, но эти имена часто удаляются связыванием, а версия скрывается в контексте выполнения, к которому нет доступа. Умная точка останова может раскрыть значение напрямую, или вы можете искать в ECMAScript:

  1. Загрузите веб-страницу (вы можете попробовать https://www.instagram.com их общее количество Coolaiders)
  2. Откройте вкладку "Инструменты разработчика Chrome" на вкладке "Источники" (control + shift + я или command + shift + i)
    1. Инструменты разработчика открываются на вкладке Источники
  3. В правом верхнем углу строки меню нажмите вертикальный многоточие и выберите поиск по всем файлам.
  4. В поле поиска внизу слева введите FIRED заглавными буквами, снимите флажок Ignore case, введите Enter
    1. Одно или несколько совпадений появятся ниже. Версия является экспортом, очень близким к строке поиска, похожей на версию: "16.0.0"
  5. Если номер версии не виден сразу: дважды щелкните строку, которая начинается с номера строки
    1. ECMAScript появляется в средней панели
  6. Если номер версии не виден сразу: нажмите на две скобки в левом нижнем углу панели ECMAScript {}
    1. ECMAScript переформатирован и легче для чтения
  7. Если номер версии не виден сразу: прокрутите несколько строк вверх и вниз, чтобы найти его, или попробуйте другой ключ поиска
    1. Если код не минифицирован, ищите ReactVersion. Там должно быть 2 совпадения с одинаковым значением.
    2. Если код минимизирован, ищите либо SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED или реагировать на дом
    3. Или поиск самой вероятной строки версии: "15. или " 16. или даже "0,15

Метод 2: Используйте точку останова DOM:

  1. Загрузить страницу, отображаемую React
  2. Щелкните правой кнопкой мыши элемент React (что угодно, например, поле ввода или поле) и выберите Inspect Element
    1. Инструменты разработчика Chrome отображают панель " Elements
  3. Находясь как можно выше в дереве от выбранного элемента, но не выше корневого элемента React (часто это div непосредственно внутри тела с id root: <div id = "root">), щелкните правой кнопкой мыши элемент и выберите Break On… - subtree modifications
    1. Примечание. Можно сравнить содержимое вкладки "Элементы" (текущее состояние DOM) с ответом для того же ресурса на вкладке "Сети". Это может показать Реагирует корневой элемент
  4. Перезагрузите страницу, нажав Обновить слева от адресной строки
    1. Инструменты разработчика Chrome останавливаются на точке останова и отображают панель " Sources
  5. В самой правой панели изучите Call Stack
  6. Как можно дальше вниз по стеку вызовов должна быть запись render, это ReactDOM.render
  7. Нажмите на строку ниже render, т.е. код, который вызывает визуализацию
  8. На средней панели теперь отображается ECMAScript с выделенным выражением .render
  9. Наведите курсор мыши на объект, используемый для вызова рендера, is. модуль react-dom объект экспорта
    1. если строка кода идет: Object (u.render) (..., наведите курсор мыши на и-
  10. Отображается окно всплывающей подсказки с version: "15.6.2", т.е. все значения, экспортируемые react-dom

Версия также внедряется в инструменты разработки React, но, насколько я знаю, нигде не отображается.

Ответ 4

Откройте консоль, затем запустите window.React.version.

Это работало для меня в Safari и Chrome при обновлении с 0.12.2 до 16.2.0.

Ответ 5

В файле index.js просто замените компонент приложения на "React.version". Например

ReactDOM.render(React.version, document.getElementById('root'));

Я проверил это с React v16.8.1

Ответ 6

Для приложения, созданного с помощью create-реагировать-приложение, мне удалось увидеть версию:

  1. Открыть Chrome Dev Tools/Firefox Dev Tools,
  2. Найдите и откройте файл main.XXXXXXXX.js, где XXXXXXXX - хеш сборок/может отличаться,
  3. Необязательно: отформатируйте источник, нажав {}, чтобы отобразить отформатированный источник,
  4. Искать как текст внутри источника для Reaction-DOM,
  5. в Хроме было найдено: "реаги-дом": "^ 16.4.0",
  6. в Firefox было найдено: 'response-dom': '^ 16.4.0'

Приложение было развернуто без исходной карты.

Ответ 7

В существующем проекте простой способ увидеть версию React - перейти к методу render любого компонента и добавить:

<p>{React.version}</p>

Предполагается, что вы импортируете React следующим образом: import React from 'react'