首页 > 其他分享 >dom断点可定位react组件值修改

dom断点可定位react组件值修改

时间:2023-12-06 15:12:08浏览次数:26  
标签:定位 dom react 修改 组件 断点

react组件的值修改,也可以使用dom断点来定位。

之前一直误区,认为react组件的修改,不能用dom断点来拦截,实际上在涉及到修改具体原生组件属性的时候,也可定位。

例如:

react组件内部使用了input组件,react组件值变化导致input的value发生改变,使用dom断点就可定位。

由于input组件的属性修改不只是value一个,可能需要在dom断点第二次或第三次才能定位目标调用栈。

tab组件点击也可使用dom断点来定位,涉及属性和class修改的,都能定位到。

在表单后置逻辑复杂,点击事件代码难寻的时候,应优先使用dom断点来定位。节约时间。

标签:定位,dom,react,修改,组件,断点
From: https://www.cnblogs.com/mengff/p/17879592.html

相关文章

  • JSX 代码是如何“摇身一变”成为 DOM 的?
    JSX是一种语法,并不是React中的内容,时下接入JSX语法的框架越来越多,但与之缘分最深的仍然是React。本节来讲一下React是如何摇身一变成为DOM的。我们平时在写React时会用JSX来描述组件的内容,例如下面的代码中,render方法return的内容就是JSX代码。classAppexten......
  • React 组件懒加载
    只有不断学习和成长,才能适应这个快速变化的世界。1.懒加载1.1React懒加载React中懒加载Lazy与Suspense需要搭配使用。React.lazy定义:React.1azy函数能让你像渲染常规组件一样处理动态引入的组件。其实就是懒加载。为什么代码要分割?当你的程序越来越大,代码量越......
  • React:实现一个定时器计数器,每秒自动+1
    需求:实现一个定时器计数器,每秒自动+1importReact,{useState,useEffect}from"react";exportdefaultfunctionApp(){let[count,setCount]=useState(0);useEffect(()=>{lettimer=setInterval(()=>{setCount(count+1);},100......
  • 一篇随笔学习React18组件通信与插槽
    了解什么是jsx->https://www.cnblogs.com/senior-shef/p/17872695.html一、了解props1、什么是propsReact支持两种组件,DOM组件和React组件。DOM组件指的是所有的HTML和SVG标签。比如说,如果我们想要使用标签,在React中,可以设置src和alt等属性。这些属性与纯HTML写法相同。在Rea......
  • idea远程打断点
    某些情况调试必须要在centos环境,本文介绍idea远程断点调试方法。请确保有一台自用服务器,可以按照本文开启远程断点。tomcat配置找到tomcat配置文件./bin/catalina.sh,增加下面一行命令CATALINA_OPTS="-Xdebug-Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005"此处使......
  • 【React工作记录九】switch对按钮进行判断操作
    目录前言 导语代码部分总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷 导语今天同事找到我......
  • React 整洁代码的 10 个最佳实践(译)
    作者:大家的林语冰链接:https://www.zhihu.com/question/36516604/answer/3279585231来源:知乎著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。React整洁代码的10个最佳实践(译)免责声明本文属于是语冰的直男翻译了属于是,仅供粉丝参考,英文原味版请临幸Top1......
  • js:React中使用classnames实现按照条件将类名连接起来
    参考文档https://www.npmjs.com/package/classnameshttps://github.com/JedWatson/classnames安装npminstallclassnames示例importclassNamesfrom"classnames";//字符串合并console.log(classNames("foo","bar"));//foobar//对象合并c......
  • JS的DOM操作一:DOM操作简介
    DOM操作简介只编写HTML而产生的页面是静态的(静态页面),是没办法和它进行交互,例如点击按钮,提交表单等。JavaScript语言,就是专门为HTML页面添加交互。(使用JS编写相关代码,将页面由静转动,也就是动态页面)【PS:爬虫的时候最不喜欢的就是动态页面了(doge)要动脑】为了能在JavaScript直......
  • 本地套接字domain的使用
    socketAPI原本是为网络通讯设计的,但后来在socket的框架上发展出一种IPC机制,就是UNIXDomainSocket。虽然网络socket也可用于同一台主机的进程间通讯(通过loopback地址127.0.0.1),但是UNIXDomainSocket用于IPC更有效率:不需要经过网络协议栈,不需要打包拆包、计算校验和、维护序号和......