脚本开发经验 - React页面获取Props属性

啊麟

本帖最后由 啊麟 于 2023-4-1 20:27 编辑

React页面获取Props属性

前言

---

vue页面中，可以直接通过dom.__vue__获取Props跟methods。

但是在react页面中，想要拿到Props，得用dom.__reactProps

但是后面有个随机字符串，例如__reactProps$8hjj1t7quvw，这种情况就得遍历下了

---

示例代码

---

function getReactPropsName(domElement) {
  for (var key in domElement) {
    // 判断属性名是否以 "__reactProps" 开头，如果是则返回该属性名
    if (key.startsWith("__reactProps")) {
      return key;
    }
  }
  // 如果未找到对应的属性名，则返回 null
  return null;
}

var myElement = document.querySelector("#douyin-right-container > div._bEYe5zo > div");
var reactPropsName = getReactPropsName(myElement);
console.log(reactPropsName); // 输出 __reactProps$8hjj1t7quvw 等类似的属性名
console.log(myElement[reactPropsName]);  // 输出dom Props属性

此文章由油猴中文网战略精神小伙合作伙伴提供~

啊麟

中分头背带裤,我是ikun你记住!

王一之

小黑子入侵油中了

啊麟

王一之 发表于 2023-4-1 21:04
小黑子入侵油中了

只因

steven026

其实可以直接这样

1. Object.values(document.querySelector(***))[1]

复制代码

绝大部分情况下react页面元素可枚举属性里，
索引0是__reactFiber$XXX；
索引1是__reactProps$XXX；
直接获取可枚举值就行了，如果遇到特殊页面再微调

啊麟

steven026 发表于 2023-4-1 23:53
其实可以直接这样

绝大部分情况下react页面元素可枚举属性里，

大哥牛逼，学到了

李恒道

steven026 发表于 2023-4-1 23:53
其实可以直接这样

绝大部分情况下react页面元素可枚举属性里，

牛逼
第一次知道
话说我QQ好友也有一个叫steven，头像跟你差不多
好巧哦

Ne-21

ikun yyds!!!!!!

dawnl-lc

1. (function () {
   
2.     // 定位目标 DOM 元素（根据类名或 id）
   
3.     const formElement = document.querySelector('');
   
4. 
   
5.     // 获取 React Fiber 实例
   
6.     const reactKey = Object.keys(formElement).find(key => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$'));
   
7.     if (!reactKey) {
   
8.         console.error('未找到 React Fiber 实例');
   
9.         return;
   
10.     }
    
11.     const fiberNode = formElement[reactKey];
    
12. })();

复制代码