Як можна сказати версію React, яка працює під час виконання браузера?

Чи є спосіб дізнатися версію виконання React у браузері?

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>

Приклад із Reactімпортованим як модулем

import React from 'react';

console.log(React.version);

Очевидно, що якщо ви імпортуєте Reactяк модуль, він не буде в глобальному масштабі. Наведений вище код призначений для комплектування з рештою програми, наприклад, використовуючи веб- пакет . Він практично ніколи не працюватиме, якщо його використовувати в консолі браузера (використовується голий вхід).

Цей другий підхід є рекомендованим. Більшість веб-сайтів будуть використовувати його. це створює-реагує-додаток робить це (використовує веб- пакет поза сценою). У цьому випадку Reactвін інкапсульований і, як правило, недоступний поза пакетом (наприклад, на консолі браузера).

З командного рядка:

npm view react version
npm view react-native version

Відкрийте інструменти Chrome Dev Tools або аналогічні програми та запустіть require('React').versionу консолі.

Це працює на веб-сайтах, таких як Facebook, а також з'ясувати, яку версію вони використовують.

За допомогою встановленого React Devtools ви можете запустити це з консолі браузера:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

Що виводить щось на кшталт:

react-dom: 16.12.0

Невідомо, що будь-які глобальні змінні ECMAScript були експортовані, а html / css не обов'язково вказує React. Тому подивіться у .js.

Спосіб 1: Подивіться в ECMAScript:

Номер версії експортується обома модулями react-dom та react, але ці імена часто видаляються шляхом скріплення, а версія прихована у контексті виконання, до якого неможливо отримати доступ. Розумна точка розриву може виявити значення безпосередньо, або ви можете здійснити пошук у ECMAScript:

1. Завантажте веб-сторінку (ви можете спробувати https://www.instagram.com, вони загалом Coolaiders)
2. Відкрийте вкладку "Інструменти для розробників Chrome" на вкладці "Джерела" (контроль + shift + i або команда + shift + i)
   1. Інструменти розробки відкриваються на вкладці "Джерела"
3. У правій частині верхньої панелі меню натисніть вертикальний еліпсис та оберіть пошук усіх файлів
4. У вікні пошуку зліва введіть FIRED з великої літери, зніміть прапорець Ігнорувати регістр , введіть 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 або реагуйте на dom
   3. Або шукайте ймовірний рядок версії: "15. або " 16. або навіть "0,15

Спосіб 2: Використовуйте точку розриву DOM:

1. Завантажте сторінку, надану React
2. Клацніть правою кнопкою миші елемент React (що завгодно, як поле введення чи поле) та виберіть Inspect Element
   1. На Elementsпанелі інструментів для розробників Chrome відображається панель
3. Як можна вище в обраному дереві від вибраного елемента, але не вище кореневого елемента React (найчастіше це div безпосередньо всередині тіла з корінцем id: <div id = "root"> ), клацніть правою кнопкою миші елемент та виберітьBreak On… - subtree modifications
   1. Примітка. Вміст вкладки "Елементи" (поточний стан DOM) можна порівняти з відповіддю на ту саму повторну дію на вкладці "Мережі". Це може виявити кореневий елемент React
4. Перезавантажте сторінку, натиснувши Перезавантажити ліворуч від адресного рядка
   1. Інструменти для розробників Chrome зупиняються на точці розриву та показують Sourcesпанель
5. На крайній правій панелі вивчіть Call Stackпіддіакно
6. Наскільки внизу стек викликів має бути renderзаписом, це такReactDOM.render
7. Клацніть рядок нижче render, тобто. код, який викликає візуалізацію
8. На середній панелі тепер відображається ECMAScript з виразом, що містить .render, виділений
9. Наведіть курсор миші на об’єкт, який використовується для виклику візуалізації, є. react-domоб'єкт експорту модуля
   1. якщо рядок коду йде: Object (u.render) (… , наведіть курсор миші на u
10. Відображається вікно підказки, що містить version: "15.6.2", тобто всі значення, експортовані користувачемreact-dom

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

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

Це працювало для мене в Safari та Chrome під час оновлення з 0.12.2 до 16.2.0.

У файлі index.js просто замініть компонент програми на "React.version". Напр

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

Я перевірив це за допомогою React v16.8.1

Для програми, створеної за допомогою create-react-app, мені вдалося переглянути версію:

1. Відкрийте інструменти Dev Chrome / Інструменти Firefox Dev,
2. Знайдіть і відкрийте головний файл.XXXXXXXX.js, де XXXXXXXX - це хеш-збирання /, може бути іншим,
3. Необов’язково: джерело форматування, натиснувши на {}, щоб показати відформатоване джерело,
4. Шукати як текст всередині джерела для react-dom,
5. у Chrome було знайдено: "react-dom": "^ 16.4.0",
6. у Firefox було знайдено: 'react-dom': '^ 16.4.0'

Додаток було розгорнуто без вихідної карти.

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

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

Це передбачає, що ви імпортуєте React так: import React from 'react'

Спочатку встановіть інструменти реагування на реабілітацію, якщо вони не встановлені, а потім скористайтеся кодом запуску нижче на консолі браузера:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version