Question

有没有办法在浏览器中了解React的运行时版本？

Answer 1

React.version正是您要找的。

虽然（据我所知）它没有记录，所以它可能不是一个稳定的特征（即虽然不太可能，它可能在将来的版本中消失或改变）。

将React导入为脚本的示例

＆＃13;

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('content')
);

＆＃13;

<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>

＆＃13;

将React导入为模块的示例

const React = require('react');

console.log(React.version);

显然，如果您将React作为模块导入，则它不会在全局范围内。上述代码旨在与您应用的其余部分捆绑在一起，例如：使用webpack。如果在浏览器的控制台中使用，它几乎不会起作用。

推荐使用第二种方法。大多数网站都会使用它。 create-react-app执行此操作（它在场景后使用webpack）。在这种情况下，React被封装，并且通常在捆绑之外根本不可访问（例如，在浏览器的控制台中）。

Answer 2

安装了React Devtools后，您可以从浏览器控制台中运行它：

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

输出类似：

react-dom: 16.12.0

Answer 3

打开Chrome开发工具或同等产品，然后在控制台中运行require('React').version。

这适用于像Facebook这样的网站，也可以找出他们正在使用的版本。

Answer 4

不确定是否已导出任何全局ECMAScript变量，并且html / css不一定表示React。所以看看.js。

方法1：查看ECMAScript：

版本号由两个模块 react-dom 和 react 导出，但这些名称通常通过捆绑删除，并且版本隐藏在无法访问的执行上下文中。一个聪明的断点可以直接显示该值，或者您可以搜索ECMAScript：

加载网页（您可以尝试https://www.instagram.com他们是完整的Coolaiders）
在“来源”标签上打开Chrome开发者工具（控制+ shift + i或命令+ shift + i）
1. 在“源”选项卡上打开开发工具
在顶部菜单栏的右侧，点击垂直省略号并选择搜索所有文件
在左侧的搜索框中输入大写字母 FIRED ，清除复选框忽略大小写，输入输入
1. 下面会显示一个或多个匹配项。版本是非常接近搜索字符串的导出，类似于版本：＆＃34; 16.0.0＆＃34;
如果版本号不能立即显示：双击以行号开头的行
1. ECMAScript出现在中间窗格
如果版本号不能立即显示：单击ECMAScript窗格左下角的两个大括号 {}
1. ECMAScript已重新格式化且更易于阅读
如果版本号不能立即显示：向上和向下滚动几行以查找它或尝试其他搜索键
1. 如果代码未缩小，请搜索 ReactVersion 应该有2次具有相同值的点击
2. 如果代码缩小，请搜索 SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED 或 react-dom
3. 或者搜索可能的版本字符串本身：＆＃34; 15。或＆＃34; 16。甚至＆＃34; 0.15 < /强>

方法2：使用DOM断点：

加载由React呈现的页面

右键单击React元素（任何内容，如输入字段或框）并选择Inspect Element

Chrome开发者工具会显示Elements窗格

从所选元素中尽可能高在树中，但不高于React根元素（通常是具有id root的body内部的div：＆lt; div id =＆＃34; root＆＃34 ;＆gt; ），右键单击一个元素并选择Break On… - subtree modifications

注意：可以将“元素”选项卡（DOM当前状态）的内容与“网络”选项卡上相同资源的响应进行比较。这可能会揭示React的根元素

点击地址栏左侧的重新加载重新加载页面

Chrome开发者工具在断点处停止并显示Sources窗格

在最右侧的窗格中，检查Call Stack子窗格

在调用堆栈尽可能远的地方，应该有一个render条目，这是ReactDOM.render

点击render下方的行，即。调用render
的代码
中间窗格现在显示ECMAScript，其中包含 .render 突出显示的表达

将鼠标光标悬停在用于调用渲染的对象上，是。 react-dom模块导出对象

如果代码行：对象（u.render）（... ，将鼠标悬停在 u
上

显示包含version: "15.6.2"的工具提示窗口，即。由react-dom
导出的所有值
该版本也被注入到React开发工具中，但据我所知，没有在任何地方显示。

Answer 5

从命令行：

npm view react version
npm view react-native version

Answer 6

打开控制台，然后运行window.React.version。

这在Safari和Chrome中适用于我，同时从0.12.2升级到16.2.0。

Answer 7

如果尚未安装，请先安装React开发工具，然后在浏览器控制台中使用以下运行代码：

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version

Answer 8

对于使用create-react-app创建的应用，我设法查看了版本：

打开Chrome开发工具/ Firefox开发工具
搜索并打开main.XXXXXXXX.js文件，其中XXXXXXXX是构建哈希值/可以不同，
可选：通过点击{}来显示已格式化的源，以格式化源，
在源代码中搜索文本以获取react-dom，
：“ react-dom”：“ ^ 16.4.0”，
：'react-dom'：'^ 16.4.0'

该应用没有部署源地图。

Answer 9

在index.js文件中，只需将 App 组件替换为“ React.version”。例如

${1:/upcase}

我已经使用React v16.8.1进行了检查

Answer 10

从命令行查看反应版本， npm查看反应版本

Answer 11

在现有项目中，查看React版本的一种非常简单的方法是转到任何组件的render方法并添加：

<p>{React.version}<p>

我假设您是这样导入React的：import React from 'react'

Answer 12

要知道反应版本，请在根文件夹中打开package.json文件，搜索关键反应。您将看到“ react”：“ ^ 16.4.0”，

Answer 13

这个策略应该一直有效：最终，React 必须通过 script 标签包含在 html 的 js 文件中。因此，找到该文件并查找 React 版本。

查看 HTML 中包含的所有脚本（查看源代码）
其中一个链接包含 React 的脚本。 WebPack 将这些库集中在一个 common-xxxx.js 文件中
打开该脚本文件并 ctrl + f 搜索 React
Presto，那里有版本号

如何判断在浏览器中运行时运行的React版本？

13 个答案: