Comment réparer cette violation de cette "réagir/pas-sans échappement-entitie" de eslint règle?

C'est mon code:

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

En quelque sorte eslint drapeaux de la ligne "vous êtes libre" avec l'erreur error HTML entities must be escaped react/no-unescaped-entities

Cependant de ce que je peux voir jsx a échappé aux apostrophes déjà. Je peux voir les mots you're free est rendu sans problème. Si je m'échappe comme ', alors il sera très difficile pour moi à la recherche de la chaîne (je m'attends à une recherche de you're free dans un éditeur de revenir d'un coup. Mais, évidemment, l'éditeur s'ennuie parce que le texte est en fait you're free)

Alors, quelle est la meilleure façon d'aborder ce eslint exception?

OriginalL'auteur Anthony Kong | 2017-04-03

25

Solution recommandée consiste à utiliser ', ‘ ou ’ au lieu de les enveloppant comme une variable. Donc comme ceci:
```
const func = () => {
  return (
    <div >
       you&apos;re free
      </div>
  )}
```
Pour la recherche, il est recommandé que vous avez des fichiers de localisation/l'internationalisation et de les appeler dans votre application.

C'est la meilleure et la plus propre moyen de résoudre ce problème. Merci!
Merci @RuChernChong! 🙂

OriginalL'auteur Noitidart
10

J'ai explicitement échapper à l'ensemble du bloc de texte en le plaçant la ligne dans {" "}:
```
const func = () => {
  return (
    <div >
       {" you're free "}
      </div>
  )}
```
Recommneded solution est d'utiliser ' au lieu de les enveloppant comme une variable.
[eslint] accolades sont inutiles ici. (réaction/jsx-bouclés-brace-présence)

OriginalL'auteur Anthony Kong
3

Les solutions ci-dessus ne fonctionnent que dans certains cas. Il ne fonctionnait pas pour moi. Dans mon cas, je pense que c'est parce que nous sommes aussi à l'aide de prettier dans notre projet. Pour résoudre l'erreur, j'ai enveloppé le copier dans backticks.
```
const func = () => {
  return (
    <div>
      {`
        You're free.
      `}
    </div>
  )
}
```
[eslint] accolades sont inutiles ici. (réaction/jsx-bouclés-brace-présence)

OriginalL'auteur Farid

Cela fonctionne pour moi, sans eslint erreurs:

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

OriginalL'auteur Vic

0

Btw, vous pouvez désactiver ce genre de mises en garde par l'ajout de
```
rules: { "react/no-unescaped-entities": 0 }
```
à votre .eslintrc

OriginalL'auteur kiba

Vous devez vous connecter pour publier un commentaire.