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

啊麟 发表于 2023-4-1 20:22:32

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

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

# React页面获取Props属性

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

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

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


---
###示例代码
---
```js
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);// 输出dom Props属性

```


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

啊麟 发表于 2023-4-1 20:24:48

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

王一之 发表于 2023-4-1 21:04:26

小黑子入侵油中了

啊麟 发表于 2023-4-1 21:38:37

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

只因

steven026 发表于 2023-4-1 23:53:32

其实可以直接这样
Object.values(document.querySelector(***))
绝大部分情况下react页面元素可枚举属性里，
索引0是__reactFiber$XXX；
索引1是__reactProps$XXX；
直接获取可枚举值就行了，如果遇到特殊页面再微调

啊麟 发表于 2023-4-2 01:04:41

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

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


大哥牛逼，学到了

李恒道 发表于 2023-4-2 01:42:49

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

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


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

Ne-21 发表于 2023-4-2 10:30:38

ikun yyds!!!!!!

dawnl-lc 发表于 2024-11-19 05:04:00

本帖最后由 dawnl-lc 于 2024-11-19 05:06 编辑

(function () {
    // 定位目标 DOM 元素（根据类名或 id）
    const formElement = document.querySelector('');

    // 获取 React Fiber 实例
    const reactKey = Object.keys(formElement).find(key => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$'));
    if (!reactKey) {
      console.error('未找到 React Fiber 实例');
      return;
    }
    const fiberNode = formElement;
})();

查看完整版本: 脚本开发经验 - React页面获取Props属性