web-dev-qa-db-fra.com

Comment corriger cette violation de cette «réaction / non-échappé-droit» de la règle eslint?

Voici mon code:

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

Eslint marque en quelque sorte la ligne "vous êtes libre" avec une erreur error HTML entities must be escaped react/no-unescaped-entities

Cependant, d'après ce que je peux voir, jsx a déjà échappé aux apostrophes. Je peux voir les mots you're free est rendu sans problème. Si je lui échappe comme &#39;, alors il sera très difficile pour moi de rechercher la chaîne (je m'attendrais à une recherche de you're free dans un éditeur pour renvoyer un hit. Mais évidemment l'éditeur va manquer car le texte est en fait you&#39;re free)

Alors, quelle est la meilleure façon de résoudre cette exception eslint?

29
Anthony Kong

La solution recommandée consiste à utiliser &apos;, &lsquo; ou &rsquo; au lieu de l'envelopper comme une variable. Alors comme ça:

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

Pour la recherche, il est recommandé de disposer de fichiers de localisation/internationalisation et de les appeler dans votre application.

39
Noitidart

J'échappe explicitement à tout le bloc de texte en joignant la ligne à {" "}:

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

Les solutions ci-dessus ne fonctionnent que dans certains cas. Ça ne marchait pas pour moi. Dans mon cas, je pense que c'est parce que nous utilisons également prettier dans notre projet. Pour résoudre l'erreur, j'ai enveloppé la copie de backticks.

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

Btw, vous pouvez désactiver ce type d'avertissements en ajoutant

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

à ton .eslintrc

0
kiba

Cela fonctionne pour moi sans erreurs d'eslint:

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