React获取DOM节点
文章目录
- 使用 useRef
- 使用 createRef
- 使用回调函数形式
在React中，通常不推荐直接操作DOM节点，因为React通过其虚拟DOM（Virtual DOM）来管理DOM的更新，以确保性能优化和一致性。
然而，在某些情况下，你可能需要直接访问DOM节点。React提供了几种方法来实现这：
使用 useRef
const myRef = useRef(null);
在函数式组件中：
import React, { useRef, useEffect } from 'react'; function MyComponent() { const myRef = useRef(null); useEffect(() => { if (myRef.current) { // 在这里，myRef.current 是DOM节点 console.log(myRef.current); } }, []); return <div ref={myRef}>Hello, World!</div>;
}
使用 useRef 来创建一个 ref ，并将其附加到一个 <div> 元素上，这样可以访问 myRef.current 来获取该 <div> 的DOM节点。
使用 createRef
myRef = React.createRef();
在类组件中：
import React from 'react'; class MyComponent extends React.Component { myRef = React.createRef(); componentDidMount() { // 在这里，this.myRef.current 是DOM节点 console.log(this.myRef.current); } render() { return <div ref={this.myRef}>Hello, World!</div>; }
}
注意：createRef 已被列为过时的 API，不再推荐在最新代码中使用
使用回调函数形式
ref={c => this.myRef = c}
在类组件中：
import React from 'react'; class MyComponent extends React.Component { myRef = null; // 在类组件中定义一个实例属性来保存DOM节点 // 组件挂载或更新后，可以访问this.myRef来获取DOM节点 componentDidMount() { console.log(this.myRef); // 访问DOM节点 console.log(this.myRef.value); // 获取input值} render() { return ( <div> <input ref={c => this.myRef = c} type="text" /> {/* 当input被挂载或更新时，this.myRef会被设置为对应的DOM节点 */} </div> ); }
} export default MyComponent;
官方更建议使用函数组件的 useRef