推荐的解决方案是使用'、‘或’，而不是将其 Package 为变量。

const func = () => {
  return (
    <div >
       you&apos;re free
      </div>
  )}

为了提高搜索能力，建议您使用本地化/国际化文件，并将其调用到应用程序中。

顺便说一下，您可以通过添加

"rules": { "react/no-unescaped-entities": 0 }

到.eslintrc文件中。

我显式地转义了整个文本块，方法是将该行包含在{" "}中：

const func = () => {
  return (
    <div >
       {" you're free "}
      </div>
  )}

我遇到了与next.js相同的问题，我所做的是打开.eslintrc.json并添加以下内容：

{
  "rules": { "react/no-unescaped-entities": 0 }
}

现在，我的.eslintrc.json将如下所示：

{
  "extends": "next/core-web-vitals",
  "rules": { "react/no-unescaped-entities": 0 }
}

上面的解决方案只在某些情况下有效。它对我不起作用。在我的情况下，我想这是因为我们在项目中也使用了prettier。为了解决这个错误，我用反勾号 Package 了副本。

const func = () => {
  return (
    <div>
      {`
        You're free.
      `}
    </div>
  )
}

这对我来说很有效，没有任何eslint错误：

const func = () => {
  return (
    <div>
      {"you're"} free
    </div>
  )
}

修复react/no-unescaped-entities错误的一种方法是将包含转义符的文本分配给一个变量，然后在JXS中引用该变量。
进一步阅读：

• Disallow unescaped HTML entities from appearing in markup (react/no-unescaped-entities)

const func = () => {
  const text = `you're free`;
  return (
    <div>
      {text}
    </div>
  )}

您可以做两件事：
1.可以使用'进行转义
例如：

const func = () => {
  return (
    <div >
       you&apos;re free
      </div>
  )}

1.或者您需要禁用ESLint规则，要禁用ESLint规则，首先在项目目录中找到.eslintrc.json，然后将这些行粘贴到那里。

**{

“扩展”：“下一个/核心-网-生命体征”，
“规则”：{
   “React/无未转义实体”：“关”，
   “@下一页/下一页/无页自定义字体”：“关闭”
}

}**