React: タグコンソールの警告に関するいくつかの問題

最近、react プロジェクトを書いていたときに、いくつかの問題を見つけました。ここに記録します!

1. コンソールの警告情報、target="_blank" による問題

rel="noreferrer" なしで target="_blank" を使用する (rel="noopener" を意味する) ことは、古いブラウザーではセキュリティ上のリスクです: https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-ノーターゲットブランク

警告は、次のサンプルコードによって発生します。

function Test() {
    return (
        <div>
            <a target="_blank" href='https://www.baidu.com/'>百度</a>
        </div>
    )
}

export default Test

タグで target="_blank" を使用すると、リンクが新しいウィンドウで開かれることは誰もが知っています. ちなみに、ターゲットに関するレビューは次のとおりです。

_空欄	リンクを新しいウィンドウで開く
_親	リンクを親フォームで開く
_上	現在のフォームでリンクを開き、現在のフォーム (フレームページ) 全体を置き換えます。
_自己	リンクを現在のウィンドウで開く (デフォルト)

解決：

a タグに rel="noopener noreferrer" を追加

<a target="_blank" href='https://www.baidu.com/' rel='noopener noreferrer'>百度</a>

説明: rel コードを使用しない場合、target='_blank' を使用すると、セキュリティホールと見なされます。新しいページは、window.opener を介してウィンドウオブジェクトにアクセスできるため、window.opener.location = newURL を使用してページをナビゲートできます。別の URL です。つまり、ページの移動先を制御できるため、安全ではありません。警告です。. . rel = 'noopener noreferrer' を使用すると、window.opener を介して null が取得され、何もできません。0.0

もちろん、 Googleはインターネットをサーフィンする科学的な方法を使用する必要があると説明しました。もちろん、私も長い写真を撮りました。

2. href="" による問題

href 属性にアクセスするには、有効な値が必要です。href 値として、有効でナビゲート可能なアドレスを指定してください。有効な href を提供できないが、要素をリンクに似せる必要がある場合は、ボタンを使用して適切なスタイルで変更します。詳細: https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

警告メッセージは、次のコードによって発生します

function Test() {
    const click = () => {
        console.log(123)
    }

    return (
        <div>
            <a onClick={() => click()}>百度</a>
        </div>
    )
}

export default Test

実際、私の当初の意図は非常に単純で、つまり、a タグは単なるクリックイベントですが、コントロールはこのような大きな警告エラーを報告する必要があります。簡単に言えば、有効な href 属性を提供する必要があります。. .

そこで、href 属性を追加し、しばらくテストした結果、href = "#!" のみが正常に使用できるようになり、ブラウザコンソールとコマンドラインは正常に動作するようになりました。. .

<a href="#!" onClick={() => click()}>百度</a>

もちろん、別の解決策として、次のように検出プラグインをオフにし、プロジェクトの package.json ファイルを見つけて、オフにするだけです。

  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "jsx-a11y/anchor-is-valid": "off"
    }
  },

このように、今でも上記の書き方を変えずに使っています。. . それでは、公式の説明がどのようになっているのか、なぜ私たちを使用して有効な href 属性を提供するのかを見てみましょう

github: 公式の説明入りきれない場合は gitee on gitee もあります : 公式の説明もちろんすべて英語で、ワンクリックで直訳しますので、漠然と説明が見られます。

はい、その通りです。. .