DOM操作

React

• child::

  获取DOM元素

  创建Ref

  React 的设计理念是通过状态驱动的方式来管理 UI，而不是直接操作 DOM。然而，有时候我们确实需要直接操作 DOM。你可以通过 ref 来实现。以下是步骤：

  1. 创建 ref：

     import React, { useRef } from 'react';
      
     function MyComponent() {
       const myRef = useRef(null);
      
       return (
         <div ref={myRef}>
           我是一个 div 元素
         </div>
       );
     }

  指向原始笔记的链接

• child::

  修改DOM元素的属性

  实例

  通过 [use::useEffect] 在组件挂载后或更新后操作 DOM。

  import React, { useRef, useEffect } from 'react';
   
  function MyComponent() {
    const myRef = useRef(null);
   
    useEffect(() => {
      // 直接操作 DOM
      myRef.current.style.color = 'red';
    }, []);
   
    return (
      <div ref={myRef}>
        我是一个 div 元素
      </div>
    );
  }

  这种方式确保了你能够在 React 中安全地操作 DOM。同时，你也可以通过回调 refs 或者第三方库（例如 ReactDOM）进行更复杂的操作。

  指向原始笔记的链接