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 '
, 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're free
)
Alors, quelle est la meilleure façon de résoudre cette exception eslint?
La solution recommandée consiste à utiliser '
, ‘
ou ’
au lieu de l'envelopper comme une variable. Alors comme ça:
const func = () => {
return (
<div >
you're free
</div>
)}
Pour la recherche, il est recommandé de disposer de fichiers de localisation/internationalisation et de les appeler dans votre application.
J'échappe explicitement à tout le bloc de texte en joignant la ligne à {" "}
:
const func = () => {
return (
<div >
{" you're free "}
</div>
)}
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>
)
}
Btw, vous pouvez désactiver ce type d'avertissements en ajoutant
rules: { "react/no-unescaped-entities": 0 }
à ton .eslintrc
Cela fonctionne pour moi sans erreurs d'eslint:
const func = () => {
return (
<div>
{"you're"} free
</div>
)
}