上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    开心
    2024-10-29 17:52
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    10

    主题

    32

    回帖

    67

    积分

    初级工程师

    积分
    67

    油中2周年油中3周年挑战者 lv2

    发表于 2023-4-1 20:22:32 | 显示全部楼层 | 阅读模式

    本帖最后由 啊麟 于 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
  • TA的每日心情
    开心
    2024-10-29 17:52
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    10

    主题

    32

    回帖

    67

    积分

    初级工程师

    积分
    67

    油中2周年油中3周年挑战者 lv2

    发表于 2023-4-1 20:24:48 | 显示全部楼层

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

    油猴中文网精神合作伙伴ikun
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-11-21 13:37
  • 签到天数: 213 天

    [LV.7]常住居民III

    305

    主题

    4220

    回帖

    4076

    积分

    管理员

    积分
    4076

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2023-4-1 21:04:26 | 显示全部楼层
    小黑子入侵油中了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-10-29 17:52
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    10

    主题

    32

    回帖

    67

    积分

    初级工程师

    积分
    67

    油中2周年油中3周年挑战者 lv2

    发表于 2023-4-1 21:38:37 | 显示全部楼层
    王一之 发表于 2023-4-1 21:04
    小黑子入侵油中了

    只因
    油猴中文网精神合作伙伴ikun
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2 小时前
  • 签到天数: 823 天

    [LV.10]以坛为家III

    31

    主题

    553

    回帖

    1564

    积分

    荣誉开发者

    积分
    1564

    荣誉开发者新人进步奖油中2周年生态建设者新人报道挑战者 lv2油中3周年喜迎中秋

    发表于 2023-4-1 23:53:32 | 显示全部楼层
    其实可以直接这样
    1. Object.values(document.querySelector(***))[1]
    复制代码

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

    使用道具 举报

  • TA的每日心情
    开心
    2024-10-29 17:52
  • 签到天数: 12 天

    [LV.3]偶尔看看II

    10

    主题

    32

    回帖

    67

    积分

    初级工程师

    积分
    67

    油中2周年油中3周年挑战者 lv2

    发表于 2023-4-2 01:04:41 | 显示全部楼层
    steven026 发表于 2023-4-1 23:53
    其实可以直接这样

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

    大哥牛逼,学到了
    油猴中文网精神合作伙伴ikun
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    713

    主题

    6002

    回帖

    6788

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6788

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-4-2 01:42:49 | 显示全部楼层
    steven026 发表于 2023-4-1 23:53
    其实可以直接这样

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

    牛逼
    第一次知道
    话说我QQ好友也有一个叫steven,头像跟你差不多
    好巧哦
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 18:17
  • 签到天数: 892 天

    [LV.10]以坛为家III

    30

    主题

    732

    回帖

    7366

    积分

    荣誉开发者

    精通各种语言的HelloWord!

    积分
    7366

    荣誉开发者油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2023-4-2 10:30:38 | 显示全部楼层
    ikun yyds!!!!!!
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-11-24 03:27
  • 签到天数: 7 天

    [LV.3]偶尔看看II

    2

    主题

    17

    回帖

    25

    积分

    荣誉开发者

    积分
    25

    新人报道油中2周年油中3周年荣誉开发者

    发表于 2024-11-19 05:04:00 | 显示全部楼层
    本帖最后由 dawnl-lc 于 2024-11-19 05:06 编辑
    1. (function () {
    2.     // 定位目标 DOM 元素(根据类名或 id)
    3.     const formElement = document.querySelector('');

    4.     // 获取 React Fiber 实例
    5.     const reactKey = Object.keys(formElement).find(key => key.startsWith('__reactInternalInstance$') || key.startsWith('__reactFiber$'));
    6.     if (!reactKey) {
    7.         console.error('未找到 React Fiber 实例');
    8.         return;
    9.     }
    10.     const fiberNode = formElement[reactKey];
    11. })();
    复制代码
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表