React中拆分字符串为字符并设置连续索引Ref的问题

你的问题出在嵌套map时，内层的i是每个单词内部的局部索引，导致第二个单词的字符会从0开始重新计数，覆盖之前的Ref索引。要实现连续索引，需要计算每个字符的全局索引，具体方案如下：

解决方案代码 #

const text = "Hello world!";
const words = text.split(" ");
let totalCharCount = 0; // 记录全局累计的字符/空格数量

{words.map((word, wordIndex) => {
  const chars = word.split("");
  const wordLength = chars.length;

  return (
    <>
      {/* 渲染当前单词的字符 */}
      <div
        key={`word-${wordIndex}`}
        className="mr-4 flex"
      >
        {chars.map((letter, charIndex) => {
          const globalIndex = totalCharCount + charIndex;
          return (
            <div
              className="inline-block"
              key={`char-${globalIndex}`}
              ref={(el) => {
                itemsRef.current[globalIndex] = el;
              }}
            >
              {letter}
            </div>
          );
        })}
      </div>

      {/* 渲染单词间的双空格（最后一个单词后不渲染） */}
      {wordIndex !== words.length - 1 && (
        <div
          className="inline-block"
          key={`space-${totalCharCount + wordLength}`}
          ref={(el) => {
            itemsRef.current[totalCharCount + wordLength] = el;
          }}
        >
          &nbsp;&nbsp;
        </div>
      )}
    </>
  );

  // 更新全局累计数量：当前单词长度 + 1个空格（非最后一个单词时）
  totalCharCount += wordLength + (wordIndex !== words.length - 1 ? 1 : 0);
})}

关键改动说明 #

• 全局索引计算：通过totalCharCount变量累计前面所有单词的字符数和空格数，每个字符的全局索引为totalCharCount + charIndex，确保索引连续不重复。
• 空格的Ref处理：单词间的双空格作为独立单元，分配对应的全局索引，符合你示例中索引连续的要求。
• 唯一Key：将key改为结合全局索引的唯一值（如char-${globalIndex}），避免React渲染时的Key冲突问题。

这样处理后，itemsRef.current的索引会完全连续：0(H),1(e),2(l),3(l),4(o),5(空格),6(w),7(o),8(r),9(l),10(d),11(!)，对应你示例中1-12的显示索引（若需要从1开始，只需将globalIndex改为totalCharCount + charIndex + 1即可）。

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