js如何判断react页面

判断 React 页面的方法

检查全局变量或对象

React 页面通常会暴露 React 或 ReactDOM 全局变量。可以通过以下代码检测：

if (typeof React !== 'undefined' || typeof ReactDOM !== 'undefined') {
  console.log('This is a React page');
}

检查根 DOM 元素

React 应用通常会将组件挂载到特定 DOM 元素上，常见 id 为 root 或 app：

const rootElement = document.getElementById('root') || document.getElementById('app');
if (rootElement && rootElement._reactRootContainer) {
  console.log('React component mounted');
}

检查数据属性

React 组件可能在 DOM 元素上添加特殊属性，如 data-reactroot：

const elements = document.querySelectorAll('[data-reactroot]');
if (elements.length > 0) {
  console.log('React detected via data attributes');
}

检查开发者工具

在浏览器开发者工具的 Console 中，输入 __REACT_DEVTOOLS_GLOBAL_HOOK__，如果返回对象则说明页面使用了 React 且开发者工具扩展已安装。

检测组件名称

React 组件在开发者工具中会显示为特殊格式，可以通过遍历 DOM 元素检测：

Array.from(document.querySelectorAll('*')).some(element => {
  const key = Object.keys(element).find(key => key.startsWith('__reactInternalInstance'));
  return key && element[key];
});

检查构建工具特征

React 项目通常使用 webpack 等构建工具，会留下特定注释：

Array.from(document.scripts).some(script => 
  script.textContent.includes('webpackJsonp') || 
  script.src.includes('main.chunk.js')
);

使用浏览器扩展

安装 React Developer Tools 浏览器扩展，它会自动检测页面是否使用 React 并在工具栏显示图标状态。