ब्राउज़र में रनटाइम पर चलने वाले रिएक्ट के संस्करण को कोई कैसे बता सकता है?


108

क्या ब्राउज़र में रिएक्ट के रनटाइम संस्करण को जानने का कोई तरीका है?


अपने डिबगर उपकरण खोलें, स्रोत फ़ाइलों को देखें, प्रतिक्रिया के लिए जावास्क्रिप्ट फ़ाइल ढूंढें, और इसे खोलें। पुस्तकालयों में आमतौर पर उनके संस्करण शीर्ष पर मुद्रित होते हैं, भले ही वे छोटा हो। कभी-कभी, आप फ़ाइल नाम से संस्करण की पहचान भी कर सकते हैं।
तेरहवीं

3
__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]
रिएक्टर

जवाबों:


122

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एक मॉड्यूल के रूप में आयात करते हैं, तो यह वैश्विक दायरे में नहीं होगा। उपरोक्त कोड को आपके बाकी ऐप के साथ बंडल किया जाना है, जैसे वेबपैक का उपयोग करना । यह वास्तव में कभी काम नहीं करेगा यदि ब्राउज़र के कंसोल में उपयोग किया जाता है (यह नंगे इनपुट का उपयोग कर रहा है)।

यह दूसरा तरीका है अनुशंसित। ज्यादातर वेबसाइट इसका इस्तेमाल करेंगी। create-react-app यह करता है (यह दृश्य के पीछे वेबपैक का उपयोग कर रहा है)। इस स्थिति में, Reactएन्कैप्सुलेट किया जाता है और आम तौर पर बंडल के बाहर (जैसे ब्राउज़र के कंसोल में) पहुंच योग्य नहीं होता है।


मैं संस्करण प्राप्त करने के लिए अपने कार्यक्रम के प्रवेश बिंदु पर कंसोल.लॉग (React.version) करने में सक्षम था
leojh

1
@gotofritz नहीं? मैंने सिर्फ रिएक्ट 16.0.0 के साथ परीक्षण किया और यह अभी भी काम कर रहा था। आप किस प्रतिक्रिया संस्करण का उपयोग कर रहे हैं? आप इसे कैसे आयात करते हैं?
क्वेंटिन रॉय

शायद यह इस बात पर निर्भर करता है कि ऐप कैसे पैक किया गया है। Create-react-app के साथ कोई ग्लोबल रिएक्ट ऑब्जेक्ट नहीं है।
गोमोफ्रिट्ज़

1
यदि आप एक मॉड्यूल के रूप में प्रतिक्रिया आयात कर रहे हैं तो कोई रिएक्ट वैश्विक नहीं है। उस स्थिति में, आपको पहले मॉड्यूल को आयात करने और मॉड्यूल की versionसंपत्ति लाने की आवश्यकता है।
क्वेंटिन रॉय

यह उन साइटों पर काम नहीं करता है जो ReactJS का उपयोग करते हैं और आप संस्करण खोजने की कोशिश कर रहे हैं। मैंने कई साइटों पर यह कोशिश की है और मुझे त्रुटि Uncaught ReferenceError: require is not definedUncaught ReferenceError: React is not defined
पिक्सेल 67


15

क्रोम देव उपकरण खोलें या समतुल्य और require('React').versionकंसोल में चलाएं ।

यह फेसबुक जैसी वेबसाइटों पर काम करता है और यह पता लगाने के लिए कि वे किस संस्करण का उपयोग कर रहे हैं।


1
कोशिश की ... मेरे app..running संस्करण प्रतिक्रिया-डोम v16 के साथ काम नहीं करता है।
user2101068

22
फ़ायरफ़ॉक्स में:ReferenceError: require is not defined
जॉन श्नाइडर

1
ऐसा इसलिए है क्योंकि आप जिस साइट पर इसका परीक्षण कर रहे हैं, वह आवश्यकता का उपयोग नहीं करता है। @JonSchneider

1
@WillHoskings: दिलचस्प अवलोकन। क्या इसके आसपास जाने का कोई रास्ता है, या हम फंस गए हैं?
होल्डऑफ ह्यूंगर

1
@HoldOffHunger बिना प्रतिक्रिया के "रिएक्ट" वैश्विक के साथ वैश्विक गुंजाइश को प्रदूषित करता है, मुझे नहीं पता।

14

प्रतिक्रियाशील Devtools स्थापित के साथ आप इसे ब्राउज़र कंसोल से चला सकते हैं:

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

जो कुछ इस तरह का उत्पादन करता है:

react-dom: 16.12.0

1
यह एक वेबसाइट पर उपयोग किए जाने वाले रिएक्ट संस्करण का पता लगाने के लिए वास्तव में एकमात्र काम करने वाला समाधान प्रतीत होता है।
जरी तुर्किया

11

यह निश्चित नहीं है कि किसी भी वैश्विक ECMAScript चर का निर्यात किया गया है और HTML / css आवश्यक रूप से प्रतिक्रिया को इंगित नहीं करता है। तो .js में देखें।

विधि 1: ECMAScript में देखें:

संस्करण संख्या दोनों मॉड्यूल प्रतिक्रिया-डोम और प्रतिक्रिया द्वारा निर्यात की जाती है, लेकिन उन नामों को अक्सर बंडल करके हटा दिया जाता है और संस्करण निष्पादन के संदर्भ में छिपा होता है जिसे एक्सेस नहीं किया जा सकता है। एक चतुर विराम बिंदु सीधे मान प्रकट कर सकता है, या आप ECMAScript खोज सकते हैं:

  1. वेब पेज लोड करें (आप https://www.instagram.com कोशिश कर सकते हैं वे कुल कूलर हैं)
  2. स्रोत टैब पर Chrome डेवलपर टूल खोलें (नियंत्रण + शिफ्ट + आई या कमांड + शिफ्ट + आई)
    1. देव उपकरण स्रोत टैब पर खुलते हैं
  3. शीर्ष मेनू बार के बहुत दाईं ओर, ऊर्ध्वाधर दीर्घवृत्त पर क्लिक करें और सभी फ़ाइलों को खोजें
  4. उन्होंने बड़े अक्षरों में एफआईआर लिखी बाईं ओर नीचे खोज बॉक्स में, चेकबॉक्स पर ध्यान न दें मामला दर्ज करें , टाइप करें दर्ज करें
    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. प्रतिक्रिया द्वारा प्रदत्त पृष्ठ को लोड करें
  2. एक रिएक्ट तत्व पर क्लिक करें (कुछ भी, जैसे इनपुट फ़ील्ड या बॉक्स) और चयन करें Inspect Element
    1. Chrome डेवलपर टूल Elementsफलक प्रदर्शित करता है
  3. चयनित तत्व से जितना संभव हो पेड़ में ऊपर, लेकिन रिएक्ट रूट तत्व से अधिक नहीं (अक्सर आईडी के साथ शरीर के अंदर एक div: <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. प्रस्तुत करने के लिए उपयोग किए जाने वाले ऑब्जेक्ट पर माउस कर्सर को घुमाएं, है। react-domमॉड्यूल निर्यात वस्तु
    1. यदि कोड लाइन जाती है: ऑब्जेक्ट (u.render) (… , यू पर होवर करें
  10. टूलटिप विंडो प्रदर्शित की जाती है version: "15.6.2", अर्थात। सभी मूल्यों द्वारा निर्यात किया गयाreact-dom

संस्करण को प्रतिक्रियाशील उपकरण में भी इंजेक्ट किया जाता है, लेकिन जहां तक ​​मुझे पता है कि कहीं भी प्रदर्शित नहीं किया गया है।


6

कंसोल खोलें, फिर चलाएं window.React.version

इसने 0.12.2 से 16.2.0 तक अपग्रेड करते हुए सफारी और क्रोम में काम किया।


मेरे लिए क्रोम 73 में काम करता है।
रॉड्रिक

window। निष्क्रिय अपरिभाषित है।
फ्रांसिस्को डी'नकोनिया

4

Index.js फ़ाइल में, बस ऐप घटक को "React.version" से बदलें। उदाहरण के लिए

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

मैंने इसे रिएक्ट v16.8.1 के साथ जांचा है


3

अनुप्रयोग -प्रतिक्रिया- एप्लिकेशन के साथ बनाए गए ऐप के लिए मैं संस्करण देखने में कामयाब रहा:

  1. क्रोम देव उपकरण / फ़ायरफ़ॉक्स देव उपकरण खोलें,
  2. खोज करें और मुख्य खोलें ।XXXXXXXXXX.js फ़ाइल जहाँ XXXXXXXX एक बिल्ड हैश है / भिन्न हो सकती है,
  3. वैकल्पिक: स्वरूपित स्रोत को दिखाने के लिए {} पर क्लिक करके प्रारूप स्रोत,
  4. प्रतिक्रिया-डोम के स्रोत के अंदर पाठ के रूप में खोजें,
  5. क्रोम में पाया गया: "प्रतिक्रिया-डोम": "^ 16.4.0",
  6. फ़ायरफ़ॉक्स में पाया गया था: 'प्रतिक्रिया-डोम': '^ 16.4.0'

स्रोत मानचित्र के बिना एप्लिकेशन को तैनात किया गया था।


3

किसी मौजूदा प्रोजेक्ट में रिएक्ट संस्करण को देखने का एक सरल तरीका renderकिसी भी घटक की एक विधि पर जाना और जोड़ना है:

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

यह मानता है कि आप इस तरह से प्रतिक्रिया आयात करते हैं: import React from 'react'


1

स्थापित नहीं होने पर पहले रिएक्ट देव टूल्स इंस्टॉल करें और फिर ब्राउजर कंसोल में कोड के नीचे रन का उपयोग करें:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.