189 8069 5689
今天小编给大家分享一下react refs如何修改dom的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
创新互联是专业的岳阳县网站建设公司，岳阳县接单;提供成都做网站、网站制作、成都外贸网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行岳阳县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
react refs修改dom的方法：1、在constructor中定义一个虚拟dom的控制；2、通过React的createRef函数声明一个叫divDaimin的控制dom节点；3、通过“componentDidMount(){this.divDaimin.current.style.color = "red";}”修改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元素就被divDaimin管理了
然后 componentDidMount生命周期是在页面dom节点挂载完之后执行的 那么我们就在componentDidMount生命周期里打印一下这个divDaimin
componentDidMount(){
console.log(this.divDaimin);
}
运行后效果如下
通过控制台信息我们可以看到 current字段对应的就是我们的元素
我们改一下componentDidMount内的代码
componentDidMount(){
console.log(this.divDaimin.current);
}
很明显 我们的元素已经是被输出在控制台上了
为了帮助大家确认我们确实是拿到这个元素了
我们改写componentDidMount中的代码
componentDidMount(){
this.divDaimin.current.style.color = "red";
}
我们用一个常规的js dom操作 将他的字体颜色改为红色
没有任何问题 这个东西一般情况下都是可以满足你的需求的 甚至在react项目中他好可以帮助你实现更多你自己没接触过的用途。
以上就是“react refs如何修改dom”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。