react 组件怎么获得指定 DOM 节点? 下面本篇文章给大家介绍一下 react 组件获取 DOM 节点的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
react 组件获取 DOM 节点的方法
React 提供的获取 DOM 元素的方法有两种, 一是 react-dom 中的 findDOMNode(), 二是 refs.
1,findDOMNode
findDOMNode 通常用于 React 组件的引用, 其语法如下:
- import ReactDOM from 'react-dom';
- ReactDOM.findDOMNode(ReactComponent);
当组件被渲染到 DOM 中后, findDOMNode 会返回该组件实例对应的 DOM 节点.
示例:
- componentDidMount(){
- const dom = ReactDOM.findDOMNode(this);
- // this 为当前组件的实例
- }
- render() {}
注: 如果 render() 中返回 null, 那么 findDOMNode() 也返回 null.findDOMNode 只对已经挂载的组件有效.
2,refs
refs 多用于 React 组件内子组件的引用. 使用 ref 获取 DOM 节点有两种情况:
(1) 子组件为原生 DOM 组件: 获取到的就是这个 DOM 节点. 如下例, this.input 就获取到了当前 < input /> 节点.
<input ref={(ref)=>{this.myInput = ref}} />
通过 this.myInput, 我就可以对 < input /> 进行一系列操作, 比如让输入框聚焦:
this.myInput.focus();
注: refs 也支持字符串格式:
<input ref='myInput' />
通过 this.refs.myInput 获取到节点.
(2) 子组件为 React 组件, 比如 < MyInput/>: 获得的就是 < MyInput/> 的实例, 因此就可以调用 < MyInput/> 的实例方法.
示例:
- componentDidMount(){
- const myComp = this.refs.myComp; // 获取到的是 < Comp /> 的实例 myComp
- const dom = ReactDOM.findDOMNode(myComp); // 获取到实例对应的 DOM 节点
- }
- render(){
- return (
- <div>
- <Comp ref='myComp' />
- </div>
- );
- }
注: 调用 < Comp /> 实例方法的方式: this.refs.myComp.method(), 但并不建议这种调用方式.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/react/17029.html