如何解决违反此 'react/no-unescaped-entitie' eslint 规则的问题？

Question

这是我的代码：

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

eslint 以某种方式将行 "you're free" 标记为错误 error HTML entities must be escaped react/no-unescaped-entities

但是据我所知，jsx 已经转义了撇号。我可以看到单词 you're free 的渲染没有问题。如果我将它转义为 '，那么我将很难搜索字符串（我希望在编辑器中搜索 you're free 到 return 命中。但显然编辑器会错过，因为文本实际上是 you're free)

那么解决此 eslint 异常的最佳方法是什么？

Answer 1

我通过将行括在 {" "}:

中来显式转义整个文本块

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

Answer 2

推荐的解决方案是使用 '、‘ 或 ’ 而不是将其包装为变量。所以像这样:

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

对于搜索能力，建议您拥有 localization/internationalization 的文件并将它们调用到您的应用程序中。

Answer 3

以上解决方案仅在某些情况下有效。它对我不起作用。就我而言，我认为这是因为我们也在我们的项目中使用了 prettier。为解决该错误，我将副本用反引号括起来。

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

Answer 4

这对我有用，没有 eslint 错误：

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

Answer 5

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

来禁用此类警告

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

到您的 .eslintrc 文件。

Answer 6

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

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

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

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

How to fix this violation of this 'react/no-unescaped-entitie' of eslint rule?