Jak naprawić to naruszenie zasad "reagowania/nieodwracalnych uprawnień" w regule eslint?

Question

To jest mój kod:

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

Jakoś eslint flagi linia „jesteś wolny” z błędem error HTML entities must be escaped react/no-unescaped-entities

Jednak z tego co widzę JSX uciekł już z apostrof. Widzę, że słowa you're free są renderowane bez problemu. Jeśli uniknę tego jako ', będzie mi bardzo trudno znaleźć ciąg znaków (spodziewałbym się, że wyszukiwanie you're free w edytorze zwróci wynik, ale oczywiście edytorowi będzie brakować, ponieważ tekst jest rzeczywiście you're free)

Jaki jest najlepszy sposób rozwiązania tego wyjątku eslint?

Answer 1

jawnie uniknąć całego bloku tekstu przez otaczającą linię {" "}:

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

Answer 2

Zalecane rozwiązanie jest użycie ', ‘ lub ’ Zamiast owijania jako zmienną. Tak więc:

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

Aby uzyskać możliwość wyszukiwania, zalecane są pliki do lokalizacji/internacjonalizacji i wywoływanie ich w aplikacji.

Answer 3

Powyższe rozwiązania działają tylko w niektórych przypadkach. To nie działało dla mnie. W moim przypadku, myślę, że to dlatego, że używamy także w naszym projekcie prettier. Aby rozwiązać ten problem, zawinąłem kopię w backticks.

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