eslint의 이 'react/no-un-escape-Entitie' 위반을 어떻게 해결할 것인가?

eslint의 이 'react/no-un-escape-Entitie' 위반을 어떻게 해결할 것인가?

코드는 다음과 같습니다.

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

왠지 eslint가 에러로 "You're free" 라인에 플래그를 붙인다.error HTML entities must be escaped react/no-unescaped-entities

그러나 내가 볼 때 jsx는 이미 아포스트로피를 벗어났다.나는 그 말을 볼 수 있다.you're free문제없이 렌더링됩니다.만약 내가 그것을 벗어나면'이 경우 스트링을 검색하기가 매우 어려워집니다(예상으로는you're free에디터에서 히트곡으로 돌려보내는 거죠하지만 편집자가 놓칠 게 분명해 왜냐하면 텍스트는 사실you're free)

그렇다면 이 예외에 대처하는 가장 좋은 방법은 무엇일까요?

권장되는 솔루션은',‘또는’변수로 포장하는 대신.그래서 이렇게.

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

검색 기능을 위해 현지화/국제화를 위한 파일을 가지고 앱으로 호출하는 것이 좋습니다.

덧붙여서, 이러한 종류의 경고를 비활성화하려면

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

고객님께.eslintrc파일.

행을 에 포함시킴으로써 텍스트 블록 전체를 명시적으로 회피합니다.{" "}:

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

저도 같은 문제가 있었어요.next.js내가 한 일은 그 문을 연 것이다..eslintrc.json다음 항목을 추가합니다.

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

이제 나의.eslintrc.json는 다음과 같이 표시됩니다.

{
  "extends": "next/core-web-vitals",
  "rules": { "react/no-unescaped-entities": 0 }
}

위의 솔루션은 경우에 따라서는 기능합니다.나한테는 안 통했어.제 경우엔, 제 생각엔 저희가 이 제품을prettier할 수 있습니다.오류를 해결하기 위해 복사본을 백틱으로 감쌌다.

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

이것은, eslint 에러 없이 기능합니다.

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

한 가지 방법으로react/no-unescaped-entities에러는 이스케이프 문자가 포함된 텍스트를 변수에 할당하고 JXS에서 변수를 참조하는 것입니다.

추가 정보:

• 이스케이프되지 않은 HTML 엔티티가 마크업에 나타나지 않도록 합니다(react/no-escapeed-entity).

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

두 가지를 할 수 있어요.

1. 로 피할 수 있다.'

   예.

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

2. 또는 ESLint 규칙을 디세블로 하고 ESLint 규칙을 디세블로 하기 위해 먼저 찾기.eslintrc.json프로젝트 디렉토리에서 이 행을 붙여넣습니다.

   {
     "extends": "next/core-web-vitals",
     "rules": {
       "react/no-unescaped-entities": "off",
       "@next/next/no-page-custom-font": "off"
     }
   }
   

이러한 실수를 피하기 위해 backtick을 사용하는 것이 보다 우아합니다.

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

이러한 문제를 수정하려면 , Visual Studio 코드에서 이 확장자를 사용할 수도 있습니다.https://github.com/christopherstyles/vscode-html-entities

html 엔티티 경고를 비활성화하지 않는 것이 몇 가지 문제를 방지하는 데 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/43177074/how-to-fix-this-violation-of-this-react-no-unescaped-entitie-of-eslint-rule