Wie kann man die zur Laufzeit laufende Version von React im Browser erkennen?

Gibt es eine Möglichkeit, die Laufzeitversion von React im Browser zu ermitteln?

React.version ist was Sie suchen.

Es ist jedoch nicht dokumentiert (soweit ich weiß), so dass es möglicherweise keine stabile Funktion ist (dh obwohl es unwahrscheinlich ist, kann es in zukünftigen Versionen verschwinden oder sich ändern).

Beispiel mit Reactals Skript importiert

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>

Beispiel mit Reactals Modul importiert

import React from 'react';

console.log(React.version);

Wenn Sie Reactals Modul importieren , liegt es natürlich nicht im globalen Bereich. Der obige Code soll mit dem Rest Ihrer App gebündelt werden, z . B. mithilfe von Webpack . Es wird praktisch nie funktionieren, wenn es in der Konsole eines Browsers verwendet wird (es verwendet bloße Eingabe).

Dieser zweite Ansatz wird empfohlen. Die meisten Websites werden es verwenden. create-react-app macht das (es benutzt Webpack hinter den Kulissen ). In diesem Fall Reactist es gekapselt und außerhalb des Bundles im Allgemeinen überhaupt nicht zugänglich (z. B. in der Konsole eines Browsers).

Über die Befehlszeile:

npm view react version
npm view react-native version

Öffnen Sie Chrome Dev Tools oder ein gleichwertiges Tool und führen Sie es require('React').versionin der Konsole aus.

Das funktioniert auch auf Websites wie Facebook, um herauszufinden, welche Version sie verwenden.

Wenn die React Devtools installiert sind, können Sie dies über die Browserkonsole ausführen:

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

Welche Ausgaben so etwas wie:

react-dom: 16.12.0

Es ist nicht sicher, ob globale ECMAScript-Variablen exportiert wurden, und HTML / CSS gibt nicht unbedingt React an. Schauen Sie also in die .js.

Methode 1: In ECMAScript suchen:

Die Versionsnummer wird von beiden Modulen " React-Dom" und " React" exportiert. Diese Namen werden jedoch häufig durch Bündelung entfernt und die Version in einem Ausführungskontext versteckt, auf den nicht zugegriffen werden kann. Ein cleverer Haltepunkt kann den Wert direkt anzeigen oder Sie können das ECMAScript durchsuchen:

1. Laden Sie die Webseite (Sie können https://www.instagram.com ausprobieren, sie sind total Coolaiders)
2. Öffnen Sie die Chrome Developer Tools auf der Registerkarte Quellen (Strg + Umschalt + i oder Befehl + Umschalt + i).
   1. Entwicklungswerkzeuge werden auf der Registerkarte Quellen geöffnet
3. Klicken Sie ganz rechts in der oberen Menüleiste auf die vertikalen Auslassungspunkte und wählen Sie Alle Dateien durchsuchen
4. In er Feld unten links Typ suchen FIRED in Großbuchstaben, deaktivieren Sie das Kontrollkästchen Fall ignorieren , Typ eingeben
   1. Eine oder mehrere Übereinstimmungen werden unten angezeigt. Die Version ist ein Export, der der Suchzeichenfolge sehr nahe kommt und wie folgt aussieht: "16.0.0"
5. Wenn die Versionsnummer nicht sofort sichtbar ist: Doppelklicken Sie auf eine Zeile, die mit einer Zeilennummer beginnt
   1. ECMAScript wird im mittleren Bereich angezeigt
6. Wenn die Versionsnummer nicht sofort sichtbar ist: Klicken Sie auf die beiden geschweiften Klammern unten links im ECMAScript-Bereich {}
   1. ECMAScript ist neu formatiert und leichter zu lesen
7. Wenn die Versionsnummer nicht sofort sichtbar ist: Scrollen Sie einige Zeilen nach oben und unten, um sie zu finden, oder versuchen Sie es mit einem anderen Suchschlüssel
   1. Wenn der Code nicht minimiert ist, suchen Sie nach ReactVersion. Es sollten 2 Treffer mit demselben Wert vorhanden sein
   2. Wenn der Code minimiert ist, suchen Sie entweder nach SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED oder react-dom
   3. Oder suchen Sie nach der wahrscheinlichen Versionszeichenfolge selbst: "15. oder " 16. oder sogar "0,15

Methode 2: Verwenden Sie einen DOM-Haltepunkt:

1. Laden Sie die von React gerenderte Seite
2. Klicken Sie mit der rechten Maustaste auf ein React-Element (etwas wie ein Eingabefeld oder ein Feld) und wählen Sie Inspect Element
   1. Chrome Developer Tools zeigt die ElementsScheibe
3. Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie es aus, so hoch wie möglich vom ausgewählten Element im Baum, jedoch nicht höher als das React-Wurzelelement (häufig ein Div direkt im Körper mit der ID-Wurzel: <div id = "root"> )Break On… - subtree modifications
   1. Hinweis: Es ist möglich, den Inhalt der Registerkarte "Elemente" (aktueller DOM-Status) mit der Antwort für dieselbe Ressource auf der Registerkarte "Netzwerke" zu vergleichen. Dies kann das Wurzelelement von React enthüllen
4. Laden Sie die Seite neu, indem Sie links in der Adressleiste auf Neu laden klicken
   1. Chrome Developer Tools stoppt an der Unterbrechungsstelle und zeigt die SourcesScheibe
5. Untersuchen Sie im Bereich ganz rechts den Call StackUnterbereich
6. So weit unten im Aufrufstapel sollte es einen renderEintrag geben, das istReactDOM.render
7. Klicken Sie auf die Zeile unten render, dh. Der Code, der das Rendern aufruft
8. Im mittleren Bereich wird jetzt ECMAScript mit einem Ausdruck angezeigt , der .render hervorhebt
9. Bewegen Sie den Mauszeiger über das Objekt, mit dem das Rendern aufgerufen wird. dasreact-dom Modul exportiert das Objekt
   1. Wenn die Codezeile lautet : Objekt (u.render) (… , schweben Sie über das u
10. Ein Tooltip-Fenster wird angezeigt, das Folgendes enthält version: "15.6.2": Alle Werte exportiert vonreact-dom

Die Version wird auch in die React-Entwicklungstools eingefügt, aber meines Wissens nirgendwo angezeigt.

Öffnen Sie die Konsole und führen Sie sie aus window.React.version.

Dies funktionierte für mich in Safari und Chrome beim Upgrade von 0.12.2 auf 16.2.0.

Ersetzen Sie in der Datei index.js einfach die App- Komponente durch "React.version". Z.B

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

Ich habe dies mit React v16.8.1 überprüft

Für eine mit create-react- app erstellte App konnte ich die Version sehen:

1. Öffnen Sie Chrome Dev Tools / Firefox Dev Tools.
2. Suchen und öffnen Sie die Datei main.XXXXXXXX.js, in der XXXXXXXX ein Build-Hash ist / anders sein könnte.
3. Optional: Formatieren Sie die Quelle, indem Sie auf {} klicken, um die formatierte Quelle anzuzeigen.
4. Suchen Sie als Text in der Quelle nach React-Dom.
5. in Chrome wurde gefunden: "react-dom": "^ 16.4.0",
6. in Firefox wurde gefunden: 'react-dom': '^ 16.4.0'

Die App wurde ohne Quellkarte bereitgestellt.

In einem vorhandenen Projekt können Sie die React-Version auf einfache Weise anzeigen, indem Sie zu einer renderMethode einer beliebigen Komponente wechseln und Folgendes hinzufügen:

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

Dies setzt voraus, dass Sie React wie folgt importieren: import React from 'react'

Installieren Sie zuerst die React dev-Tools, falls diese nicht installiert sind, und verwenden Sie dann den folgenden Code in der Browserkonsole:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version