react+ts与react+js:document.getElementById(‘container’)与 useRef<HTMLDivElement>(null)的相关理解记录

文章介绍了在JavaScript中通过`document.getElementById`获取DOM元素引用以及在React中利用`useRef`Hook创建和使用Ref对象来引用DOM元素或组件实例。Ref提供了安全访问和操作组件及DOM元素的方法,特别是在组件生命周期中进行DOM操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>
  );
};

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值