如何在React/JSX中添加可动态计算的多个空格？

有两种简单可行的方法实现动态控制空格数量：

方法1：使用Unicode非断空格字符（推荐） #

直接用Unicode的非断空格\u00A0（和 是同一个字符），它不需要转义就能在JSX里直接渲染，还能通过String.repeat()根据变量生成对应数量：

const spaceCount = 8; // 可根据业务逻辑动态赋值
<h1>HELLO{'\u00A0'.repeat(spaceCount)}WORLD</h1>

这样就能直接渲染出连续的多个空格，不会被浏览器合并。

方法2：利用CSS保留空白字符 #

给目标元素添加white-space: pre或white-space: pre-wrap样式，让浏览器保留原始空格字符，之后就能直接用普通空格的重复字符串：

const spaceCount = 8;
<h1 style={{ whiteSpace: 'pre' }}>HELLO{' '.repeat(spaceCount)}WORLD</h1>

注意：white-space: pre会同时保留换行和空格，适合严格需要空白格式的场景；如果不想保留换行，换成pre-wrap更合适。

补充说明 #

• 直接写多个' '无效，是因为HTML默认的空白折叠规则会把连续空格合并成单个。
• 直接用' '.repeat(n)会被当成普通字符串渲染成  ...，而非实际空格，所以不能这么用。

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