React-当页面渲染完成后,如何操作DOM节点?

大部分情况下你不需要去操作DOM元素,你只需要通过设置组件的状态值(setState),react会通过状态值去渲染组UI。但是可能在某些情况下你确实需要直接操作 DOM。

react是从jsx到虚拟dom再从虚拟dom生成dom的,所以需要在页面生成DOM后才能去操作DOM节点的,那么很容易让我们相到react的几个生命周期,componentDidMount()就是在组件挂载之后调用的一个生命周期,这时已经生成了DOM节点,所以,可以在这个生命周期里 操作DOM!

Example:

假如我们要移除页面中a标签的某个属性,怎么操作呢?莫急,仔细看下面的代码:

componentDidUpdate:function(){

        if(!!document.getElementsByTagName("a")[0].getAttribute("href")) {

            for(var i=0;i<documnet.getElementsByTagName("a").length;i++){

                 document.getElementsByTagName("a")[i].removeAttribute("href")

};

}}},


没错,就是这么简单!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 参考文章:深度剖析:如何实现一个Virtual DOM 算法 作者:戴嘉华React中一个没人能解释清楚的问题——...
    waka阅读 6,017评论 0 21
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,116评论 2 35
  • It's a common pattern in React to wrap a component in an ...
    jplyue阅读 3,319评论 0 2
  • 洁白的月光花,立在 青翠的枝叶上 银色的齿轮,旋出 黑白的世界 淡蓝色的天空,上面 挂着一轮皎洁的满月 插上金色的...
    艾弥儿阅读 652评论 2 12
  • 画家曾梵志:1.8亿的画 关于画家曾梵志,我同样不写得太啰嗦,只列几件事。 ——2...
    乔桥阅读 1,594评论 12 4