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

推荐阅读更多精彩内容