React是一个流行的JavaScript库,用于构建用户界面。在React中,通常使用虚拟DOM(Virtual DOM)来管理和更新界面。但有时候,我们可能需要直接操作真实的DOM节点。本文将介绍如何在React中获取真实的DOM节点,并提供相应的源代码示例。
在React中,可以使用ref来获取真实的DOM节点。ref是React提供的一个特殊属性,用于引用组件或DOM元素。通过ref,我们可以访问和操作组件或DOM元素的属性和方法。
要获取真实的DOM节点,首先需要创建一个ref对象。在React中,有两种方式创建ref对象:使用回调函数或使用React.createRef()方法。
- 使用回调函数创建ref对象
import React, { useRef } from 'react';
function MyComponent() {
const myRef = useRef(null);
const handleClick = () => {
// 获取真实DOM节点
console.log(myRef.current);
};
return (
<div>
<button onClick={handleClick}>获取DOM节点</button>
<div ref=