如何修复React项目yarn build时的react/no-unescaped-entities错误？

方法1：手动转义引号 #

在Dialog提示文本中，将未转义的引号替换为对应HTML实体：

• 双引号"替换为"
• 单引号'替换为'

示例修改：

// 原代码
<Dialog content="确认要删除'服务器A'吗？" />
// 修改后
<Dialog content="确认要删除&apos;服务器A&apos;吗？" />

// 原代码
<Dialog content="提示：请输入符合"规范"的名称" />
// 修改后
<Dialog content="提示：请输入符合&quot;规范&quot;的名称" />

方法2：使用JS表达式包裹文本 #

通过模板字符串或JSX表达式片段包裹含引号的文本，避免HTML实体解析问题：

• 模板字符串方式：

<Dialog content={`确认要删除'服务器A'吗？`} />

• JSX片段方式：

<Dialog>
  <span>确认要删除{'服务器A'}吗？</span>
</Dialog>

方法3：临时禁用ESLint规则（不推荐） #

仅在确认文本无XSS风险的前提下，可局部禁用规则：

• 组件顶部全局禁用：

/* eslint-disable react/no-unescaped-entities */

• 特定行单独禁用：

<Dialog content="确认要删除'服务器A'吗？" /> // eslint-disable-line react/no-unescaped-entities

问题原因说明 #

开发模式下React会自动兼容部分未转义字符，但react/no-unescaped-entities规则是为了规避XSS风险和HTML解析异常，因此build阶段会严格校验代码规范。

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