React多文件文本高亮切换丢失：如何持久化高亮状态？

问题根源
你当前直接操作DOM添加高亮元素的方式，绕过了React的状态管理机制。React核心逻辑是基于state/props生成并维护DOM，当切换文件触发组件重渲染时，React会根据files[fileIndex]?.data的原始文本重新生成DOM，直接覆盖你手动添加的span元素——哪怕用Map存储ref也无济于事，因为ref仅指向DOM节点，节点内容仍由React渲染逻辑控制，重渲染会重置这部分内容。

解决方案：将高亮状态存入React State，由React管理渲染
核心思路是把每个文件的高亮信息（选中的文本范围、对应实体）存在state中，切换文件时读取对应文件的高亮状态，让React负责渲染带高亮的文本，而非直接修改DOM。

步骤1：定义存储高亮状态的State #

用对象记录每个文件的高亮范围，键为文件名，值为该文件的高亮信息数组：

import { useState, useRef } from 'react';

const YourComponent = ({ entities }) => {
  // 现有state：files、fileIndex等保持不变
  const [highlightedRanges, setHighlightedRanges] = useState({});
  const textRefs = useRef(new Map());

  // 现有getTextRef函数保留
  const getTextRef = (fileName) => {
    if (!textRefs.current.has(fileName)) {
      textRefs.current.set(fileName, { current: null });
    }
    return textRefs.current.get(fileName);
  };

  // 后续代码...
};

步骤2：修改文本选择逻辑，存储高亮范围 #

不再直接操作DOM，计算选中文本在原始字符串中的起始/结束索引，将信息存入state：

const handleTextSelection = (e) => {
  e.preventDefault();
  if (fileIndex === null || entityIndex === null) return;

  const selection = window.getSelection();
  const selectedText = selection.toString();
  if (!selectedText) return;

  const range = selection.getRangeAt(0);
  const textContainer = getTextRef(files[fileIndex].name).current;
  if (!textContainer.contains(range.commonAncestorContainer)) return;

  // 计算选中内容在原始文本中的起始索引
  const preRange = document.createRange();
  preRange.setStart(textContainer.firstChild, 0);
  preRange.setEnd(range.startContainer, range.startOffset);
  const start = preRange.toString().length;
  const end = start + selectedText.length;

  const fileName = files[fileIndex].name;
  const entity = entities[entityIndex];

  // 更新高亮状态，避免重复添加相同范围
  setHighlightedRanges(prev => {
    const currentRanges = prev[fileName] || [];
    const isDuplicate = currentRanges.some(r => r.start === start && r.end === end);
    if (isDuplicate) return prev;
    
    return {
      ...prev,
      [fileName]: [...currentRanges, { start, end, entity }]
    };
  });

  selection.removeAllRanges();
};

步骤3：编写高亮文本渲染函数 #

根据原始文本和高亮范围，将文本拆分为普通片段和高亮片段，用React元素渲染：

// 辅助函数：渲染带高亮的文本
const renderHighlightedText = (text, ranges = []) => {
  if (!text) return '';
  
  // 按起始位置排序，避免渲染顺序混乱
  const sortedRanges = [...ranges].sort((a, b) => a.start - b.start);
  const parts = [];
  let lastIndex = 0;

  for (const range of sortedRanges) {
    // 添加高亮前的普通文本
    if (range.start > lastIndex) {
      parts.push(text.slice(lastIndex, range.start));
    }
    // 添加高亮片段（包含sup和删除按钮）
    const highlightedText = text.slice(range.start, range.end);
    parts.push(
      <span 
        key={`${range.start}-${range.end}`} 
        className="highlight"
      >
        {highlightedText}
        <sup>{range.entity.name}</sup> {/* 按需调整entity的显示字段 */}
        <img 
          src="/path/to/del-icon.png" 
          className="del-img" 
          onClick={() => removeHighlight(range, files[fileIndex].name)}
          alt="删除高亮"
        />
      </span>
    );
    lastIndex = range.end;
  }

  // 添加剩余的普通文本
  if (lastIndex < text.length) {
    parts.push(text.slice(lastIndex));
  }

  return parts;
};

// 删除高亮的函数
const removeHighlight = (rangeToRemove, fileName) => {
  setHighlightedRanges(prev => {
    const currentRanges = prev[fileName] || [];
    return {
      ...prev,
      [fileName]: currentRanges.filter(
        r => r.start !== rangeToRemove.start || r.end !== rangeToRemove.end
      )
    };
  });
};

步骤4：修改组件渲染逻辑 #

用上述渲染函数替换原始文本渲染：

<div
  className="text-container"
  onMouseUp={(e) => handleTextSelection(e)}
  ref={getTextRef(files[fileIndex]?.name)}
>
  {renderHighlightedText(
    files[fileIndex]?.data, 
    highlightedRanges[files[fileIndex]?.name]
  )}
</div>

额外说明 #

• 这种方式完全遵循React状态管理逻辑，切换文件时，React会自动读取对应文件的highlightedRanges并渲染高亮效果，不会丢失状态。
• 如果需要持久化高亮状态（如刷新页面后保留），可将highlightedRanges存入localStorage，组件初始化时读取。

内容的提问来源于stack exchange，提问作者MasterBlasterCoder