web-dev-qa-db-de.com

Wie kann man feststellen, welche Version von React zur Laufzeit im Browser ausgeführt wird?

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

javascriptreactjs
55
leojh

React.version ist was Sie suchen.

Es ist jedoch (soweit ich weiß) nicht dokumentiert, so dass es möglicherweise kein stabiles Merkmal ist (d. H. Obwohl es unwahrscheinlich ist, kann es in zukünftigen Versionen verschwinden oder sich ändern).

Beispiel mit React als Skript importiert

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('content')
);
<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="content"></div>

Beispiel mit React als Modul importiert

const React = require('react');

console.log(React.version);

Wenn Sie React als Modul importieren, ist dies natürlich nicht im globalen Bereich. Der obige Code soll mit dem Rest Ihrer App gebündelt werden, z. mit webpack . Es wird praktisch nie funktionieren, wenn es in einer Browserkonsole verwendet wird.

Dieser zweite Ansatz ist der empfohlene. Die meisten Websites verwenden es. create -react-app macht dies (es verwendet webpack hinter der Szene). In diesem Fall ist React gekapselt und im Allgemeinen außerhalb des Pakets (z. B. in einer Browser-Konsole) überhaupt nicht zugänglich. 

75
Quentin Roy

Öffnen Sie die Chrome Dev Tools oder ein gleichwertiges Programm und führen Sie require('React').version in der Konsole aus. 

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

12
Johan Henriksson

Es ist nicht sicher, dass globale ECMAScript-Variablen exportiert wurden und html/css nicht unbedingt auf React verweist. Also in die .js schauen.

Methode 1: In ECMAScript suchen:

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

  1. Lade die Webseite (du kannst versuchen https://www.instagram.com sie sind total Coolaiders)
  2. Öffnen Sie die Chrome-Entwicklertools auf der Registerkarte "Quellen" (Strg + Umschalttaste + i oder Befehlstaste + Umschalttaste + i)
    1. Entwicklungstools werden auf der Registerkarte Quellen geöffnet
  3. Klicken Sie ganz rechts in der oberen Menüleiste auf die vertikale Ellipse und wählen Sie Alle Dateien durchsuchen.
  4. Deaktivieren Sie im Suchfeld unten links FIRED in Großbuchstaben. Deaktivieren Sie das Kontrollkästchen Groß-/Kleinschreibung ignorieren, geben Sie Enter .__ ein.
    1. Eine oder mehrere Übereinstimmungen werden unten angezeigt. Die Version ist ein Export, der der Suchzeichenfolge sehr nahe kommt und wie version 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 Klammern unten links im ECMAScript-Fensterbereich {}
    1. ECMAScript ist neu formatiert und lesbarer
  7. Wenn die Versionsnummer nicht sofort sichtbar ist: Blättern Sie einige Zeilen nach oben oder 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 nach 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 (z. B. ein Eingabefeld oder ein Feld) und wählen Sie Inspect Element
    1. Chrome Developer Tools zeigt den Bereich Elements an
  3. So hoch wie möglich in der Baumstruktur des ausgewählten Elements, aber nicht höher als das React-Wurzelelement (häufig ein div direkt in body mit id root: <div id = "root">), klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie Break On… - subtree modifications
    1. Hinweis: Es ist möglich, den Inhalt der Registerkarte Elemente (aktueller Status des DOM) mit der Antwort für dieselbe Ressource auf der Registerkarte Netzwerke zu vergleichen. Dies kann das Wurzelelement von React zeigen
  4. Laden Sie die Seite neu, indem Sie links neben der Adressleiste auf Neu laden klicken
    1. Die Chrome Developer Tools halten am Haltepunkt an und zeigen den Bereich Sources an
  5. Untersuchen Sie im rechten Bereich den Call Stack-Teilbereich
  6. So weit wie möglich im Aufrufstapel sollte es einen render-Eintrag geben, dies ist ReactDOM.render
  7. Klicken Sie auf die Zeile unter render, dh. der Code, der das Rendern aufruft
  8. Im mittleren Bereich wird jetzt ECMAScript mit einem Ausdruck angezeigt, der .render enthält
  9. Bewegen Sie den Mauszeiger über das Objekt, das zum Aufrufen des Renderers verwendet wird, ist. Das Modul react-dom exportiert das Objekt
    1. wenn die Codezeile lautet: Object (u.render) (…, bewegen Sie den Mauszeiger über u 
  10. Ein Tooltip-Fenster mit version: "15.6.2" wird angezeigt. alle von react-dom exportierten Werte

Die Version wird auch in React-Entwicklertools eingespritzt, aber meines Wissens nicht überall angezeigt.

5
Harald Rudell

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

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

3
jgrumps

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

  1. Öffnen Sie die Chrome Dev Tools/Firefox Dev Tools.
  2. Suchen und öffnen Sie die Datei main.XXXXXXXX.js, wobei XXXXXXXX ein Build-Hash ist/anders aussehen
  3. Optional: Formatieren Sie die Quelle durch Klicken auf {}, um die formatierte Quelle anzuzeigen.
  4. Suche als Text in der Quelle nach Reaktom,
  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.

1
Fierascu Gheorghe

In einem vorhandenen Projekt können Sie die React-Version ganz einfach anzeigen, indem Sie zu einer render-Methode einer beliebigen Komponente wechseln und Folgendes hinzufügen:

<p>{React.version}<p>

Ich nehme an du importierst Reagier so: import React from 'react'

0
DrNio

Ersetzen Sie einfach in der Datei index.js App component durch "React.version" .

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

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

0
Faiyaz Alam