如何修复这种违反这种'反应/没有未转义权限'的eslint规则？

Question

这是我的代码：

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

不知何故，eslint标记“你是免费的”行，错误为error HTML entities must be escaped react/no-unescaped-entities

但是从我看到的情况来看，jsx已经逃过了撇号。我可以看到单词you're free没有问题。如果我将其作为'转义，那么我将很难搜索字符串（我希望在编辑器中搜索you're free以返回命中。但显然编辑将会错过因为文本实际上是you're free）

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

Answer 1

建议的解决方案是使用'，‘或’，而不是将其包装为变量。像这样：

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

对于搜索功能，建议您拥有本地化/国际化的文件，并将其调用到您的应用中。

Answer 2

通过将行括在{" "}：

中，我明确地转义了整个文本块

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

Answer 3

以上解决方案仅在某些情况下有效。它不适合我。就我而言，我认为这是因为我们在项目中也使用prettier。为了解决这个错误，我将副本包装在反引号中。

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

Answer 4

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

来禁用此类警告

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

到您的.eslintrc

Answer 5

这对我有用，没有错误提示：

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