在使用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. 谈谈ConcurrentHashMap1.7和1.8的不同实现

    知止而后有定,定而后能静,静而后能安,安而后能虑,虑而后能得. ConcurrentHashMap 在多线程环境下,使用HashMap进行put操作时存在丢失数据的情况,为了避免这种bug的隐患,强烈 ...

  2. windoes下一台电脑是无线/USB上网,如何将另一台电脑通过一拖一上网

    https://wenku.baidu.com/view/0c95830bbb68a98271fefa6e.html 一台电脑是无线上网,如何将另一台电脑通过一拖一上网有时候,在没有路由器的情况下,只 ...

  3. Preview all adidas NMD Singapore colorways just below

    A week ago, we've got a glimpse into adidas NMD Singapore for the future using their Tubular line. O ...

  4. Python: 复数的数学运算

    写的最新的网络认证方案代码遇到了一个难题,唯一的解决办法就是使用复数空间,需要使用复数来执行一些计算操作. 复数可以用使用函数complex(real, imag) 或者是带有后缀j 的浮点数来指定. ...

  5. json反序列化快捷实体类

    有时候我们反序列化一个json串只为了提取里面的数据,而且json串的层级结构可能会比较复杂,定义对应的实体类会多而杂,有时还不一定能达到想要的效果. 则可以关注下以下两个类: java :      ...

  6. INNODB锁(2)

    在上一篇文章写了锁的基本概述以及行锁的三种形式,这一篇的主要内容如下: 一致性非锁定读 自增长与锁 外键和锁 一致性性非锁定读 一致性非锁定读是InnoDB通过多版本并发控制(MVCC,multi v ...

  7. mysql中生成列与JSON类型的索引

    MySQL中支持生成列,生成列的值是根据列定义中包含的表达式计算的. 一个简单的例子来认识生成列! CREATE TABLE triangle( sidea DOUBLE, sideb DOUBLE, ...

  8. MSF基础攻击实践报告

    MSF基础攻击实践 MSF的六个模块:exploit,encoder,payload,aux,post,nops exploit——渗透攻击模块 测试者利用它来攻击一个系统,程序,或服务,以获得开发者 ...

  9. 20145326 《Java程序设计》第10周学习总结

    教材学习内容总结 网络编程 •网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据. •程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴. •在发送 ...

  10. kafka生产者和消费者流程

    前言 根据源码分析kafka java客户端的生产者和消费者的流程. 基于zookeeper的旧消费者 kafka消费者从消费数据到关闭经历的流程. 由于3个核心线程 基于zookeeper的连接器监 ...