Как исправить это нарушение этого правила "react/no-unescaped-Entity" правила eslint?

это мой код:

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?

11
eslint eslint-config-airbnb react-jsx

3 ответов

рекомендуется использовать &apos;, &lsquo; или &rsquo; вместо того, чтобы обернуть его как переменную. Вот так:

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

для возможности поиска рекомендуется иметь файлы для локализации / интернационализации и вызывать их в приложение.

16

Я явно избегаю всего блока текста, заключая строку в {" "}:

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

вышеперечисленные решения работают только в некоторых случаях. Это не сработало для меня. В моем случае, я думаю, это потому что мы с помощью prettier в нашем проекте. Чтобы устранить ошибку, я завернул копию в backticks.

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