1: JS:const container = document.getElementById(‘container’).
document.getElementById(‘container’) 返回的是一个 DOM 元素的引用,也就是一个指向 HTML 文档中某个具体元素的对象,你可以使用这个引用来对该元素进行操作,例如修改其样式或者添加事件监听器等。这个引用是 JavaScript 对象,而不是 React 组件或者 React 元素。
2. TS: const container = useRef<HTMLDivElement>("null")
useRef<HTMLDivElement>(null)是 React 中一个特殊的 Hook,它创建了一个可以附加到 React 组件的 Ref 对象,用来获取组件的实例或者 DOM 元素的引用。它的返回值也是一个对象,这个对象包含一个属性 current,其初始值为 null,当 Ref 对象被附加到组件或者 DOM 元素上之后,current 属性会被设置为对该组件或者 DOM 元素的引用。------后面使用参数的时候一定注意判断是否为空。
😀小知识:
组件的实例:在react中,每当一个组件被渲染到页面上时,都会创建一个对应的实例。这个实例就是组件的实例,也可以称为组件的引用。
DOM 元素的引用:指对一个具体的 HTML 元素进行引用。在 React 中,可以使用
ref
属性来获取对一个 DOM 元素的引用。当组件被挂载到页面上时,
ref
属性指向的 DOM 元素会被渲染到页面上,同时也会在组件的实例中创建一个对这个 DOM 元素的引用。这个引用可以用来在组件中操作这个 DOM 元素,例如修改样式、添加事件等。在 React 中,可以使用
ref
属性来获取组件的实例或者 DOM 元素的引用,具体使用方法会因情况而异。对于组件的实例,可以使用类组件的this
关键字或者函数组件的useRef
钩子来创建一个对组件实例的引用。对于 DOM 元素,可以使用useRef
钩子来创建一个对 DOM 元素的引用,也可以使用类组件的ref
属性来获取对 DOM 元素的引用。
下面是一个使用示例,它展示了如何通过 document.getElementById('container')
和 useRef<HTMLDivElement>(null)
来获取元素的引用:
import React, { useEffect, useRef } from 'react';
const MyComponent = () => {
// 使用 useRef 创建 Ref 对象
const containerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
// 使用 document.getElementById 获取元素的引用
const container = document.getElementById('container');
// 对元素进行操作
container.style.backgroundColor = 'red';
// 使用 Ref 对象获取元素的引用
const containerRefCurrent = containerRef.current;
// 对元素进行操作
if (containerRefCurrent) {
containerRefCurrent.style.backgroundColor = 'blue';
}
}, []);
return (
<div>
{/* 使用 Ref 对象来获取元素的引用 */}
<div ref={containerRef}>Hello, world!</div>
{/* 直接使用 document.getElementById 来获取元素的引用 */}
<div id="container">Hello, world!</div>
</div>
);
};