如何在JS中获取网页生成的reactEventHandlers后缀随机字符串

核心误区说明 #

你无法通过单独运行给出的随机字符串生成函数得到和当前页面一致的结果：这段代码是React库初始化阶段仅执行一次的逻辑，Math.random()生成的随机值仅对应当前页面的React实例，每次页面刷新都会生成新值，脱离当前页面上下文运行得到的随机串完全不匹配。

可行实现方案 #

场景1：在浏览器页面上下文（控制台/注入脚本/无头浏览器页面执行环境）中运行 #

整个页面所有React渲染的DOM节点挂载的__reactEventHandlers$xxx、__reactInternalInstance$xxx属性的后缀完全一致，你只需要从任意React渲染的DOM节点的属性中匹配对应前缀即可：

// 1. 获取目标DOM节点
const targetNode = document.querySelector(".ProductReviewCustomerInfo-name");
// 2. 匹配前缀为__reactEventHandlers$的属性名
const reactHandlerProp = Object.getOwnPropertyNames(targetNode).find(key => key.startsWith("__reactEventHandlers$"));
// 3. 拿到对应的事件处理对象
const reactEventHandlers = targetNode[reactHandlerProp];

如果需要提取随机后缀字符串复用，直接截取即可：

const randomSuffix = reactHandlerProp.slice("__reactEventHandlers$".length);
// 可直接拼接得到其他React内部属性名
const reactInstanceProp = `__reactInternalInstance$${randomSuffix}`;

场景2：Node.js 服务端爬虫场景 #

React的这类内部属性是挂载在DOM对象的内存属性上，不会出现在静态HTML源码中，因此无法通过cheerio等静态HTML解析工具获取，需要使用Puppeteer、Playwright等无头浏览器工具加载页面后，在页面执行上下文中运行上述代码获取结果。

内容的提问来源于stack exchange，提问作者wanying li