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

Question

This is my code:

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

Somehow eslint flags the line "you're free" with error error HTML entities must be escaped react/no-unescaped-entities

However from what I can see jsx has escaped the apostrophes already. I can see the words you're free is rendered without issue. If I escape it as ', then it will be very hard for me to search for the string (I would expect a search of you're free in an editor to return a hit. But obviously the editor will miss because the text is actually you're free)

So what is the best way to address this eslint exception?

Answer 1

推荐的解决方案是使用',‘或’代替将其包装为变量。所以像这样：

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

对于搜索能力，建议您有本地化/国际化文件并将它们调用到您的应用程序中。

Answer 2

顺便说一句，您可以通过添加禁用这种警告

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

到你的.eslintrc文件。

Answer 3

我通过将行括在以下中来明确转义整个文本块{" "}：

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

Answer 4

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

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

Answer 5

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

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