web-dev-qa-db-ja.com

このeslintルールの「react / no-unescaped-entitie」の違反を修正する方法は？

これは私のコードです：

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

どういうわけか、eslintはエラーerror HTML entities must be escaped react/no-unescaped-entitiesで「あなたは自由です」という行にフラグを立てます

しかし、私が見ることができることから、jsxはすでにアポストロフィをエスケープしています。 you're freeという単語が問題なくレンダリングされていることがわかります。 &#39;としてエスケープすると、文字列を検索するのが非常に困難になります（エディターでyou're freeを検索するとヒットが返されることを期待します。テキストは実際にyou&#39;re freeであるため）

それでは、このエスリント例外に対処する最良の方法は何ですか？

react-jsxeslinteslint-config-airbnb
29
Anthony Kong

推奨される解決策は、&apos;、&lsquo; または &rsquo;を変数としてラップする代わりに。このように：

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

検索を可能にするために、ローカライズ/国際化用のファイルを用意し、それらをアプリに呼び出すことをお勧めします。

39
Noitidart

行を{" "}で囲むことにより、テキストブロック全体を明示的にエスケープします。

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

上記のソリューションは、いくつかの場合にのみ機能します。それは私のために働いていませんでした。私の場合、プロジェクトでprettierも使用しているためだと思います。エラーを解決するために、コピーをバックティックでラップしました。

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

ところで、この種の警告を無効にするには、次を追加します。

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

あなたの.eslintrc

0
kiba

これは私にはeslintエラーなしで機能します：

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