react中findDOMNode
在使用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的更多相关文章
- React中Ref 的使用 React-踩坑记_05
React中Ref 的使用 React v16.6.3 在典型的React数据流中,props是父组件与其子组件交互的唯一方式.要修改子项,请使用new props 重新呈现它.但是,在某些情况下,需 ...
- 理解React中es6方法创建组件的this
首发于:https://mingjiezhang.github.io/(转载请说明此出处). 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的 ...
- 【原】React中,map出来的元素添加事件无法使用
在使用react中,经常用到react的map函数,用法和jquery里中的map一样,但是,如果你在每个map出来的元素中添加,你会发觉添加的事件无法关联, 比如,我们很多的评论,我需要在每个评论下 ...
- React中props.children和React.Children的区别
在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <di ...
- Immutable 详解及 React 中实践
本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万 ...
- React中父组件与子组件之间的数据传递和标准化的思考
React中父组件与子组件之间的数据传递的的实现大家都可以轻易做到,但对比很多人的实现方法,总是会有或多或少的差异.在一个团队中,这种实现的差异体现了每个人各自的理解的不同,但是反过来思考,一个团队用 ...
- React中使用CSSTransitionGroup插件实现轮播图
动画效果,是一个页面上必不可少的功能,学习一个新的东西,当然就要学习,如何用新的东西,用它的方法去实现以前的东西啦.今天呢,我就在这里介绍一个试用react-addons-css-transition ...
- 在React中使用Redux
这是Webpack+React系列配置过程记录的第六篇.其他内容请参考: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-rout ...
- React中的路由系统
React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端 ...
随机推荐
- [GDAL]在三维场景中显示DEM
粗糙实现了个版本 存储波段的基本信息和数据: namespace RGeos.Terrain { //存储波段的基本信息和数据 public class RasterBandData { public ...
- POJ1523:SPF(无向连通图求割点)
题目:http://poj.org/problem?id=1523 题目解析: 注意题目输入输入,防止PE,题目就是求割点,并问割点将这个连通图分成了几个子图,算是模版题吧. #include < ...
- 《Clean Code》一书回顾
<Clean Code>一书从翻开至今,已经差不多两个月的时间了,尽管刨去其中的假期,算下来实在是读得有点慢.阅读期间,断断续续的做了不少笔记.之前,每每在读完了一本技术书籍之后,其中的诸 ...
- cocos代码研究(21)Widget子类Text,TextAtlas,TextBMFont学习笔记
理论基础 Text类又称ttf格式文本,可以用ttf文件或者系统自带字体,支持文字多,但是ttf文件格式体积大,渲染速度慢: TextBMFont类又称fnt格式文本,纹理创建,根据纹理上有的文字来显 ...
- js中var a={}什么意思
创建一个变量a, 并给a赋值:{}是一个空的对象,是 new Object();的简写.
- spring整合ehcache 注解实现查询缓存,并实现实时缓存更新或删除
写在前面:上一篇博客写了spring cache和ehcache的基本介绍,个人建议先把这些最基本的知识了解了才能对今天主题有所感触.不多说了,开干! 注:引入jar <!-- 引入ehcach ...
- 钉钉企业的CorpId 查看
打开钉钉开发者文档官网,注册一个账号(个人也可以注册),登陆账号之后在开发账号管理那里可以看到corpid(企业ID),corpsecret需要生成
- web实现负载均衡的几种实现方式
摘要: 负载均衡(Load Balance)是集群技术(Cluster)的一种应用.负载均衡可以将工作任务分摊到多个处理单元,从而提高并发处理能力.目前最常见的负载均衡应用是Web负载均衡.根据实现的 ...
- iptable的使用
目录 iptables iptables iptables详解 2012-07-18 20:10:08 分类: LINUX 一:前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它 ...
- Git-时光穿梭【转】
本文转载自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 时光穿梭机 我们已经成 ...