本文详解在 React JSX 中正确重复渲染 HTML 实体（如 ©、® 等）的方法，解决直接使用字符串 .repeat() 导致实体被转义为纯文本的问题，并提供安全、可复用的实现方案。

本文详解在 react jsx 中正确重复渲染 html 实体（如 ©、® 等）的方法，解决直接使用字符串 `.repeat()` 导致实体被转义为纯文本的问题，并提供安全、可复用的实现方案。

在 JSX 中，HTML 实体（如 © 表示版权符号 ©）不会在字符串中自动解析为对应字符——这是 React 的默认防护机制：它将字符串内容视为纯文本，防止 XSS 攻击。因此，以下写法无法达到预期效果：

<div>{"&#169;".repeat(4)}</div>

渲染结果为文字 ©©©©（即 4 个未解析的实体编码），而非四个 © 符号。

✅ 正确做法是让 React 分别渲染每个实体为独立的 JSX 节点。由于 © 是纯文本内容，最简洁的方式是使用空标签 > 包裹，再通过 Array.fill() 构造 JSX 元素数组：

<div>{Array(4).fill(<>&#169;</>)}</div>

该代码创建一个长度为 4 的数组，每个元素都是一个 React Fragment（...>），内部包含已解析的 © 字符；JSX 会依次渲染数组中的每个 Fragment，最终输出

©©©©

。

? 补充说明与最佳实践：

arcgis-js

提供 ArcGIS Maps SDK for JavaScript 开发辅助，涵盖 2D/3D 地图视图、图层管理、数据可视化、空间分析等功能模块的参考和示例指导。

下载

• ✅ 推荐使用数字字符引用（如 ©）而非命名实体（如 ©），因后者在 JSX 中需额外转义（©），易出错；

• ✅ 若需动态控制重复次数，可封装为可复用组件：

  const RepeatChar = ({ char, times }) => {
    return Array(times).fill(<>{char}</>);
  };
  
  // 使用示例
  <div><RepeatChar char="&#169;" times={4} /></div>

• ⚠️ 避免使用 dangerouslySetInnerHTML（如 {__html: "©".repeat(4)}），既不必要又引入安全风险；

• ? 对于 Unicode 字符（如 © 可直接写作 ©），更推荐直写字符本身（"©".repeat(4) + 数组渲染），语义更清晰：

  <div>{Array(4).fill(<>&copy;</>)}</div> // 或
  <div>{Array(4).fill(<>&#169;</>)}</div>

总结：JSX 中重复特殊字符的核心在于避免字符串拼接，改用 JSX 元素数组渲染。Array(n).fill(xx;>) 是轻量、安全且符合 React 哲学的标准解法。