React Hooks中如何将单词进一步拆分为单个字符并处理内容数组

你可以直接参考以下调整后的代码，同时满足单词拆分为单个字符、兼容数组类型输入的需求：

完整修改后的代码 #

import React from "react";
import "./styles.css";
import content from "./content";

// 拆分文本组件：兼容字符串/数组输入，支持拆分到单个字符
const SplitText = React.memo(({ str }) => {
  // 统一处理输入内容：如果是数组先扁平化再拼接为字符串
  const rawContent = Array.isArray(str) ? str.flat().join(' ') : str;

  return (
    <div>
      {rawContent.split(" ").map((word, wordIndex) => {
        return (
          <div key={`word-${wordIndex}-${word}`}>
            {/* 单个单词拆分出单个字符 */}
            {word.split('').map((char, charIndex) => {
              return <span key={`char-${wordIndex}-${charIndex}-${char}`}>{char}</span>
            })}
            {/* 保留单词间的空格，不需要可删除 */}
            &nbsp;
          </div>
        )
      })}
    </div>
  );
});

// 主应用
export default function App() {
  return (
    <div className="App">
      <h1>
        {/* 字符串输入示例 */}
        <SplitText str={"Lucie Bachman"} />
      </h1>
      <h2>
        {/* 数组输入示例 */}
        <SplitText str={["Hey,", "this", "is", "my", "first", "post", "on", "StackOverflow!"]} />
      </h2>
    </div>
  );
}

核心逻辑说明 #

• 输入兼容处理：首先对传入的str参数做类型判断，如果是数组类型会先扁平化后拼接为完整字符串，统一后续拆分逻辑，数组内嵌套数组也可以正常处理
• 字符拆分逻辑：在原有按空格拆分得到单词列表的基础上，对每个单词再次做拆分得到单个字符，每个字符单独用span标签包裹，你可以按需给标签添加自定义类名实现字符级样式控制、动效等需求
• 渲染优化：调整key值为「类型+索引+内容」的组合，避免仅用索引作为key导致的列表重复渲染异常问题

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