在 JSX 中直接使用字符串的 repeat() 方法无法渲染 HTML 实体，需通过创建元素数组并填充 React 片段来实现安全、可靠的重复渲染。
在 jsx 中直接使用字符串的 `repeat()` 方法无法渲染 html 实体，需通过创建元素数组并填充 react 片段来实现安全、可靠的重复渲染。
在 React 开发中，常需动态重复渲染特殊字符（如版权符号 © 对应的 HTML 实体 ©）。但需注意：JSX 并非直接解析 HTML 字符串，而是基于 JavaScript 对象（React 元素）进行渲染。因此，像 {"©".repeat(4)} 这样的写法，虽生成了正确的字符串 "©©©©"，但 JSX 会将其作为纯文本子节点处理，不会解析其中的 HTML 实体——最终页面显示的是字面量 ©©©©，而非四个 © 符号。
✅ 正确做法是：避免字符串插值，改用 React 元素数组。利用 Array(n).fill() 创建指定长度的数组，并用 ©>（空 Fragment）作为每个元素，确保每个 © 都被独立解析为 HTML 实体：
<div>{Array(4).fill(<>©</>)}</div>该写法等价于手动书写：
<div> <>©</> <>©</> <>©</> <>©</> </div>
? 补充说明：
- ©> 是 React.Fragment 的简写语法，用于包裹内容而不引入额外 DOM 节点；
- Array(4).fill(...) 生成长度为 4 的数组，每个元素均为一个可渲染的 React 片段；
- JSX 会逐个渲染数组中的元素，因此每个 © 均被正确转义为 © 符号。
⚠️ 注意事项：
- 切勿使用 dangerouslySetInnerHTML 来“强行”解析 HTML 字符串（如 {__html: "©".repeat(4)}），这存在 XSS 风险且违背 React 的设计原则；
- 若需动态控制重复次数，建议封装为组件或自定义 Hook，提升复用性与可维护性：
function RepeatChar({ char = "©", times = 1 }) {
return <span>{Array(times).fill(<>{char}</>)}</span>;
}
// 使用示例
<RepeatChar char="×" times={3} /> {/* 渲染 ××× */}总结：在 JSX 中重复特殊字符，核心在于用 React 元素替代原始字符串。Array(n).fill(xx;>) 是简洁、安全、符合 React 模式的标准解法。
