브라우저에서 런타임에 실행되는 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모듈로 가져 오면 전역 범위에 포함되지 않습니다. 위의 코드는 앱의 나머지 부분에 번들로 제공됩니다 (예 : webpack 사용) . 브라우저의 콘솔에서 사용하면 거의 작동하지 않습니다 (베어 입력 사용).

이 두 번째 방법이 권장됩니다. 대부분의 웹 사이트에서 사용합니다. create-react-app 이이 작업을 수행합니다 ( 뒤에서 웹팩을 사용하고 있음 ). 이 경우 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 개발자 도구를 엽니 다 (control + shift + i 또는 command + shift + i).
   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 또는 react-dom을
   3. 또는 가능한 버전 문자열 자체를 검색합니다 : "15. 또는 "16. 또는 "0.15

방법 2 : DOM 중단 점 사용 :

1. React에서 렌더링 한 페이지로드
2. React 요소 (입력 필드 또는 상자와 같은 모든 요소)를 마우스 오른쪽 버튼으로 클릭하고 Inspect Element
   1. Chrome 개발자 도구에 Elements창이 표시됨
3. 선택한 요소에서 가능한 한 트리에서 위쪽에 있지만 React 루트 요소보다 높지 않은 경우 (종종 id root : <div id = "root">를 사용하는 본문 내부의 div ) 요소를 마우스 오른쪽 버튼으로 클릭하고Break On… - subtree modifications
   1. 참고 : 요소 탭 (DOM 현재 상태)의 내용을 네트워크 탭의 동일한 리소스에 대한 응답과 비교할 수 있습니다. 이것은 React의 루트 요소를 나타낼 수 있습니다.
4. 주소 표시 줄 왼쪽의 새로 고침을 클릭하여 페이지를 새로 고침합니다.
   1. Chrome 개발자 도구가 중단 점에서 중지하고 Sources창을 표시합니다.
5. 맨 오른쪽 창에서 Call Stack 하위 창을 확인합니다.
6. 가능한 한 호출 스택 아래에 render 항목ReactDOM.render
7. 아래 줄을 클릭하십시오 render . 렌더링을 호출하는 코드
8. 이제 가운데 창에 .render가 포함 된 표현식이있는 ECMAScript가 표시됩니다. 강조 표시된
9. 렌더링을 호출하는 데 사용되는 개체 위에 마우스 커서를 놓습니다. 그만큼react-dom모듈 수출 객체
   1. 코드 행이 다음과 같은 경우 : Object (u.render) (… , u 위로 마우스를 가져갑니다.
10. 를 포함하는 툴팁 창이 표시됩니다 version: "15.6.2". 내 보낸 모든 값react-dom

버전도 React 개발 도구에 삽입되지만 내가 아는 한 어디에도 표시되지 않습니다.

콘솔을 열고 window.React.version.

이것은 0.12.2에서 16.2.0으로 업그레이드하는 동안 Safari와 Chrome에서 저에게 효과적이었습니다.

index.js 파일에서 App 컴포넌트를 "React.version"으로 바꾸면됩니다. 예

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

React v16.8.1로 이것을 확인했습니다.

create-react- app으로 만든 앱의 경우 버전을 확인했습니다.

1. Chrome Dev Tools / Firefox Dev Tools를 엽니 다.
2. XXXXXXXX가 빌드 해시이거나 다를 수있는 main.XXXXXXXX.js 파일을 검색하고 엽니 다.
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 개발 도구를 설치 한 다음 브라우저 콘솔에서 아래 코드를 실행하십시오.

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version