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

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

};

}}},


没错,就是这么简单!

你可能感兴趣的:(React-当页面渲染完成后,如何操作DOM节点?)