ReactJS中遍历字符串每个字符做映射时空格不显示的问题如何解决？

这是HTML默认的空白折叠规则导致的，你的React逻辑本身没有问题：split生成的数组确实包含空格，渲染时也生成了对应空格的<span>标签，但浏览器默认会将独立行内元素内的单个普通空格识别为可折叠的分隔空白，最终显示时直接忽略，才会出现空格消失的情况。

有两种常用的修复方案，按需选择即可：

方案1（推荐）：修改父元素空白处理规则 #

给父容器<Wrapper>添加保留空白的样式，不需要修改遍历逻辑，改动最小。
如果你用的是Tailwind CSS，直接添加whitespace-pre-wrap类：

<Wrapper className="text-6xl whitespace-pre-wrap">

如果你是写原生CSS，给Wrapper组件对应的类添加属性：

white-space: pre-wrap;

这个规则会让浏览器保留所有空白字符，同时支持正常的文本自动换行，完全适配标题动画的场景。

方案2：遍历阶段替换空格为非断空格 #

如果不想修改父元素样式，可以在遍历字符时，将空格替换为不会被折叠的Unicode非断空格\u00A0：

{titleArray.map((character, index) => {
    return (
        <span key={index}>
            {character === ' ' ? '\u00A0' : character}
        </span>
    )
})}

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