• 技术文章 >web前端 >前端问答

    react refs怎么修改dom

    藏色散人藏色散人2023-01-06 11:19:01原创87

    react refs修改dom的方法:1、在constructor中定义一个虚拟dom的控制;2、通过React的createRef函数声明一个叫divDaimin的控制dom节点;3、通过“componentDidMount(){this.divDaimin.current.style.color = "red";}”修改dom值即可。

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react refs怎么修改dom?

    React使用refs操作DOM方法详解

    在react框架 甚至说是三大框架中都是不太支持大家直接去操作dom的

    因为也没什么必要

    当然也会有特殊情况 例如视频播放 强制动画 第三方插件的一些渲染或初始化

    官方也给了我们对应的解决办法

    那就是refs

    我们来简单写一个 我们先在constructor中定义一个虚拟dom的控制

    参考代码如下

    constructor(props){
     super(props);
     this.divDaimin = React.createRef()
     this.state = {
     }
    }

    这里 我们就通过React提供给我们的createRef函数声明了一个叫divDaimin的控制dom节点

    叫什么你们随意 可以声明无数个 这个对数量没有限制

    然后我们在页面上去写一个节点给我们声明的divDaimin 去控制

    <div className="App">
       <div ref = { this.divDaimin }>你好</div>
    </div>

    这样 我们这块div元素就被divDaimin管理了

    然后 componentDidMount生命周期是在页面dom节点挂载完之后执行的 那么我们就在componentDidMount生命周期里打印一下这个divDaimin

    componentDidMount(){
     console.log(this.divDaimin);
    }

    运行后效果如下

    52989b1c37565b3d830c9ed0e6fd837.jpg

    通过控制台信息我们可以看到 current字段对应的就是我们的元素

    我们改一下componentDidMount内的代码

    componentDidMount(){
       console.log(this.divDaimin.current);
     }

    530b5b2b1cba06534ef90324a83b149.jpg

    很明显 我们的元素已经是被输出在控制台上了

    为了帮助大家确认我们确实是拿到这个元素了

    我们改写componentDidMount中的代码

    componentDidMount(){
         this.divDaimin.current.style.color = "red";
      }

    我们用一个常规的js dom操作 将他的字体颜色改为红色

    93dc023e10b10e8288be53a2e0d4855.jpg

    没有任何问题 这个东西一般情况下都是可以满足你的需求的 甚至在react项目中他好可以帮助你实现更多你自己没接触过的用途

    推荐学习:《react视频教程

    以上就是react refs怎么修改dom的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:dom React
    上一篇:webstorm react 报错怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react怎么实现点击隐藏显示• react怎么设置div高度• react中怎么用link跳转• react的setstate什么时候同步• webstorm react 报错怎么办
    1/1

    PHP中文网