在使用react过程中,大家有时会
那么这里的findDomNode是做什么的呢?

import { findDomNode } from 'react-dom';

  简单来说是用来得到实际Dom的,因为react组件有个特点,它有自定义组件,比如<NavBox/>这种,用ref来获取这种组件获取到的这是组件定义的对象的实例,见下面代码

getNodeInstance() {

const nodeInstance = this.refs.navBox;

}

function WapShop() {

return (

<div>

<NavBox ref="navBox" />

</div>

);

}

  这里的nodeInstance就是一个NavBox的实例,但是如果这样:  此时initailNode会得到NavBox组件中render方法返回的dom元素。

let initialNode  =  findDomNode(this.refs.navBox);
reactJs对DOM的操作
1. 使用选择器

var Btn = document.getElementById('btn')
ReactDom.findDOMNode(Btn).style.color = 'red'
2. 使用ref

在标签内使用ref='btn'

this.refs.btn.style.color = 'red'
Refs 是访问到组件内部DOM节点唯一可靠的方法 
注意:不要在render或render之前对Refs进行调用

react中findDOMNode的更多相关文章

  1. React中Ref 的使用 React-踩坑记_05

    React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...

  2. 理解React中es6方法创建组件的this

    首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...

  3. 【原】React中,map出来的元素添加事件无法使用

    在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...

  4. React中props.children和React.Children的区别

    在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...

  5. Immutable 详解及 React 中实践

    本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...

  6. React中父组件与子组件之间的数据传递和标准化的思考

    React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...

  7. React中使用CSSTransitionGroup插件实现轮播图

    动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...

  8. 在React中使用Redux

    这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...

  9. React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...

随机推荐

  1. PHP指定概率算法

    转载来源链接: https://blog.csdn.net/sinat_35861727/article/details/54980807 PHP指定概率算法,可用于刮刮卡,大转盘等抽奖算法. 假设: ...

  2. Ubuntu下navicat过期解决办法

    Ubuntu下使用navicat过期.试用期是15天. 可以删除.navicat64/解决.不好的一点就是.需要重新连接数据库,以前的连接记录会被删除 rm -rf ~/.navicat64/

  3. 如何使用iClap创建普通批注

    iClap是一款以产品管理为基础的企业协同办公软件,其中智能批注为其产品管理的核心工具,我们可以以图片,文字和视频的形式创建批注.本文为大家介绍的是如何在iClap上创建普通批注(图片,文字形式). ...

  4. centOS下升级python版本,详细步骤

    1.可利用linux自带下载工具wget下载,如下所示:(  笔者安装的是最小centos系统,所以使用编译命令前,必须安装wget服务,读者如果安装的是界面centos系统,或者使用过编译工具则可跳 ...

  5. selenium+java破解滑动验证码

    2019-04-16更新 修复极验页面改版,这次采用极验官方的demo地址:https://www.geetest.com/demo/slide-bind.html 截止2019-04-16,极验和腾 ...

  6. bzoj2721 / P1445 [Violet]樱花

    P1445 [Violet]樱花 显然$x,y>n$ 那么我们可以设$a=n!,y=a+t(t>0)$ 再对原式通分一下$a(a+t)+ax=x(a+t)$ $a^{2}+at+ax=ax ...

  7. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  8. kernel: swapper: page allocation failure. order:1, mode:0x20

    场景:领导电话通知,我们的主站宕机了,到家后从另外一台机器上ssh一直处于等待状态,开始怀疑机器的负载比较高,后查看监控机器,发现网卡.cpu.nginx连接数.....通通都没有数据了,显然不是负载 ...

  9. JS封装简单后代选择器

    大概思路是这样的:通过判断传过来的参数是什么类型,如果是对象,那这里就是this(因为封装是自己用的,肯定不会随便乱传一个对象过来),如果是一个函数(匿名函数),那就是Dom加载(这里先不讲),如果是 ...

  10. linux下如何使用split

    答: 切割文件hello,以每个文件最大10MiB来切割,切割好的文件名前缀为hello.,后缀为二位的数字,切割之后的名字为hello.01,hello.02等等    split -b 10M - ...