当前位置：首页 > React

react修改dom后如何恢复

2026-03-11 12:59:56React

恢复 React 中修改的 DOM

在 React 中，直接操作 DOM 通常是不推荐的，因为 React 通过虚拟 DOM 管理实际 DOM 的更新。如果需要恢复修改的 DOM，可以采用以下方法：

使用状态管理 通过 React 的状态管理机制控制 DOM 的渲染。修改状态后，React 会自动重新渲染组件，恢复到预期的 DOM 结构。

const [isModified, setIsModified] = useState(false);

const handleModify = () => {
  setIsModified(true);
};

const handleRestore = () => {
  setIsModified(false);
};

return (
  <div>
    {isModified ? <ModifiedComponent /> : <OriginalComponent />}
    <button onClick={handleModify}>修改</button>
    <button onClick={handleRestore}>恢复</button>
  </div>
);

使用 Refs 保存原始 DOM 通过 useRef 保存原始 DOM 的引用，恢复时重新应用原始内容。

const originalRef = useRef(null);
const modifiedRef = useRef(null);

const handleModify = () => {
  if (modifiedRef.current) {
    modifiedRef.current.innerHTML = '<p>修改后的内容</p>';
  }
};

const handleRestore = () => {
  if (modifiedRef.current && originalRef.current) {
    modifiedRef.current.innerHTML = originalRef.current.innerHTML;
  }
};

return (
  <div>
    <div ref={originalRef}>
      <p>原始内容</p>
    </div>
    <div ref={modifiedRef}>
      <p>原始内容</p>
    </div>
    <button onClick={handleModify}>修改</button>
    <button onClick={handleRestore}>恢复</button>
  </div>
);

使用 key 强制重新渲染 通过改变组件的 key 属性，强制 React 重新渲染组件，恢复到初始状态。

const [key, setKey] = useState(0);

const handleModify = () => {
  // 修改 DOM 的操作
};

const handleRestore = () => {
  setKey(prevKey => prevKey + 1);
};

return (
  <div key={key}>
    <p>原始内容</p>
    <button onClick={handleModify}>修改</button>
    <button onClick={handleRestore}>恢复</button>
  </div>
);

使用第三方库 如果需要更复杂的 DOM 操作和恢复，可以考虑使用第三方库如 immer 或 redux 管理状态，确保 DOM 修改可逆。

react修改dom后如何恢复

import produce from 'immer';

const [state, setState] = useState({ content: '原始内容' });

const handleModify = () => {
  setState(
    produce(draft => {
      draft.content = '修改后的内容';
    })
  );
};

const handleRestore = () => {
  setState(
    produce(draft => {
      draft.content = '原始内容';
    })
  );
};

return (
  <div>
    <p>{state.content}</p>
    <button onClick={handleModify}>修改</button>
    <button onClick={handleRestore}>恢复</button>
  </div>
);