React DOM操作
来源:互联网 发布:电脑winrar解压软件 编辑:程序博客网 时间:2024/06/05 20:08
转自 https://itbilu.com/javascript/react/4JZnZhDcl.html
注:getDOMNode方法已被findDOMNode()替代
大多数情况下,我们并不需要直接操作真实的DOM,React 的虚拟DOM足以满足创建用户界面的需要。而在极少数情况下,我们又不得不去操作底的DOM。为了和浏览器交互,我们需要获取对DOM节点的引用,React 提供了一个访问受自身控制的DOM节点(已挂载组件)的方法getDOMNode,通过这个方法我们可以在组件挂载后访问底层 DOM。
refs属性
受控的DOM节点是指由在React 组件挂载后,React 组件由生成的DOM节点。要访问这些DOM节点,首先需要获取对这些节点的引用,这时我们需要为组件设置一个ref属性。ref可以是一个字符串,可用于任何由render()方法返回的组件实例。ref做为字符串时,相当于一个组件ID,所以其值必须是唯一的。
设置该refs属性后,我们就可以在组件内部通过this.refs或通过findDOMNode()查找组件生成的DOM。
在render()方法中设置refs属性:
<input type="text" ref="myInput" />
设置refs属性可以通过this.refs获取对组件的引用:
this.refs.myInput
或者使用findDOMNode查找DOM:
React.findDOMNode(this.refs.myInput)
ref 回调属性
ref属性可是一个回调函数,该函数会在组件挂载后立即执行,被引用的组件会做为参数传入回调函数中:
<input ref={ function(component){ React.findDOMNode(component).focus();} } />
findDOMNode方法与getDOMNode方法
findDOMNode是ReactDOM类库提供的一个类方法。该方法可以在组件内部或外部获取对组件生成的底层DOM的引用。
getDOMNode是React组件的实例方法,该方法可以获取组件实例生成的DOM引用。
findDOMNode和getDOMNode方法都会返回一个DOM元素(DOMElement),但findDOMNode方法找不到元素生成的DOM元素时,可能会返回NULL。
示例:使用findDOMNode或getDOMNode访问底层DOM:
var MyInput = React.createClass({ handleClick: function() { // 使用getDOMNode方法访问底层的API this.refs.myInput.getDOMNode().focus(); }, componentDidMount: function() { // 使用findDOMNode方法访问底层的API ReactDOM.findDOMNode(this.refs.myInput).value = 'itbilu.com'; }, render: function() { return <input type="text" ref="myInput" />; }});ReactDOM.render( <MyInput />, document.getElementById('example'));
内部访问与外部访问
上面介绍了通过通过组件的refs属性访问组件生成的底层DOM,使用refs属性访问组件,是组件的内部访问。
在实际应中,可能还会外部访问组件。外部访问组件生成的DOM,要通过ReactDOM.render()方法返回的组件实例获取对组件的引用:
var MyInput = React.createClass({ render: function() { return <input type="text" />; }});var myInput = ReactDOM.render( <MyInput />, document.getElementById('example'));// 使用findDOMNode()方法外部访问组件ReactDOM.findDOMNode(myInput).value = 'itbilu.com';// 使用getDOMNode()方法外部访问组件myInput.getDOMNode().focus();
可访问DOM的组件生命周期
要访问底层DOM要在DOM创建完成后,即:组件挂载完成后。componentDidMount并不是底层DOM的唯一的访问环境,在componentDidMount挂载完成后,及组件生命周期的存在期、销毁&清理期都可以访问。
- React-DOM操作详解
- React-DOM操作详解
- React DOM操作
- React(8)--DOM操作
- React 中 ref 操作DOM的使用
- React为什么要尽量避免操作DOM
- React.js中通过ref操作DOM
- react中操作dom元素自动填充
- React入门03-react中操作组件的dom节点
- react中操作dom的方法之---refs
- React 操作DOM元素的两种方式
- React相关Dom约束性和非约束性操作
- DOM操作看Vue&React的前端组件化,顺带补齐React的demo
- React获取DOM节点
- React --- Virtual DOM
- React:虚拟DOM
- React虚拟DOM浅析
- React基本原理-虚拟DOM
- c# 多线程系列二 自定义线程执行器
- C# 线程系列三 定时器线程
- PCI驱动框架简单分析
- C# Socket系列一 简单的创建socket的监听
- 发送邮件
- React DOM操作
- 【mysql 错误】1209
- C# Socket系列三 socket通信的封包和拆包
- C# 根据自定义线程定时器 生成随机订单
- 更新最新版360后,无法开启64位虚拟机了
- 一步一步开发Game服务器(一)
- 研究 研究而已 java和.net的HashSet对比
- C# 利用socekt做到http监听,怎么样才能做到高性能
- 一步一步开发Game服务器(二)完成登陆,聊天