React中的DOM操作

react可以允許我們通過 ref 來定位一個組件。具體的做法是:
先給一個組件設置一個 ref=‘xxx’ 的屬性,注意這個ref必須是全局唯一的。

<input ref=‘city’ />

然后就可以通過 this.refs.city 來訪問這個組件。
但是請注意,這里拿到的只是虛擬DOM,而不是真實的DOM。
只有在render方法執行之后,并且react已經完成了DOM的更新,才能通過 this.refs.city.getDOMNode() 來拿到原生的DOM元素。
如果你在react更新DOM之前這么做,很有可能拿到的是空的或者是舊的DOM元素。
一般我們會在 componentDidMount 后者 事件回調中使用 getDOMNode 方法。

我們需要操作原生DOM最常見的情況就是我們使用了其他的庫進行DOM操作。比如我們使用了jquery的一個自動補全插件,他需要在原生DOM上初始化。

除了通過getDOMNode還可以通過jQuery來獲取dom對象

componentDidMount:function(){
        /*DOM加載之后觸發的事件*/
        var o = this;
        document.addEventListener("scroll",function(){
            var scrollTop = document.body.scrollTop;
            var t = o.refs.toTop.getDOMNode();
            if(scrollTop>50){
                $(t).addClass("am-active");
            }else{
                $(t).removeClass("am-active");
            }
        },false);
        var $goTop = $('[data-am-widget="gotop"]');
        $goTop.find('a').on('click', function(e) {
            e.preventDefault();
            $(window).smoothScroll();
        });
    },
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容