如何通过getElementsByClassName获取React随机命名内部实例的key值

实现方案 #

你可以通过匹配属性名前缀的方式定位到React内部实例属性，具体实现代码如下：

// 获取目标DOM节点
const targetNode = document.getElementsByClassName('card-list__card grid-layout-item grid-list-item')[0]
// 匹配React内部实例属性名（兼容不同React版本）
const reactPropName = Object.keys(targetNode).find(key => 
  key.startsWith('__reactInternalInstance') || key.startsWith('__reactFiber')
)
// 读取对应key值
const targetKey = targetNode[reactPropName]?.key

注意事项 #

• 上述写法兼容React 16到React 18的主流版本，不同版本的React内部实例属性前缀会有差异，已在匹配逻辑中做了兼容处理
• 该方法调用的是React未对外公开的私有API，仅推荐用于临时脚本、爬虫等非生产业务场景。如果是你自己开发的React项目，优先通过React状态、props透传的方式拿到对应key值，避免后续React版本更新导致逻辑失效

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