当前位置：首页 > React

react如何实现修改dom

2026-01-24 23:10:03React

直接操作 DOM（不推荐）

在 React 中直接操作 DOM 通常是不推荐的做法，因为这违背了 React 的设计原则。React 通过虚拟 DOM 来高效更新真实 DOM，直接操作可能导致状态不一致。

使用 ref 获取 DOM 节点：

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  const handleClick = () => {
    myRef.current.style.color = 'red';
  };

  return (
    <div>
      <div ref={myRef}>This is a DOM element</div>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

使用 React 状态管理（推荐）

通过改变状态来让 React 自动更新 DOM 是最佳实践：

import { useState } from 'react';

function MyComponent() {
  const [color, setColor] = useState('black');

  const handleClick = () => {
    setColor('red');
  };

  return (
    <div>
      <div style={{ color }}>This is a DOM element</div>
      <button onClick={handleClick}>Change Color</button>
    </div>
  );
}

使用 useEffect 处理副作用

当需要在 DOM 更新后执行操作时：

import { useEffect, useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return <input ref={myRef} />;
}

动态修改 className

通过条件渲染修改类名：

function MyComponent() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div className={isActive ? 'active' : ''}>
      Content
      <button onClick={() => setIsActive(!isActive)}>Toggle</button>
    </div>
  );
}

使用 dangerouslySetInnerHTML

在极少数需要设置原始 HTML 的情况下：

function MyComponent() {
  const htmlContent = '<span>Raw HTML</span>';

  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}

使用 Portal 渲染到其他 DOM 节点

将内容渲染到 DOM 树的其他位置：

react如何实现修改dom

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}