Réagir : quelques problèmes avec un avertissement de la console de balises

Lorsque j'écrivais le projet React ces derniers jours, j'ai trouvé quelques problèmes, qui sont ici enregistrés !

Table des matières

1. Informations d'avertissement de la console, problèmes causés par target="_blank"

L'utilisation de target="_blank" sans rel="noreferrer" (qui implique rel="noopener") est un risque de sécurité dans les anciens navigateurs : voir https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx- pas de cible vide

L'avertissement est causé par l'exemple de code suivant

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

export default Test

Nous savons tous que lorsque vous utilisez target="_blank" dans la balise a, le lien s'ouvre dans une nouvelle fenêtre. Voici d'ailleurs un avis sur target :

_blanc	Ouvrir le lien dans une nouvelle fenêtre
_parent	Ouvrir le lien dans le formulaire parent
_haut	Ouvrir le lien dans le formulaire courant et remplacer tout le formulaire courant (frame page)
_soi	Ouvrir le lien dans la fenêtre actuelle (par défaut)

Solution:

Ajouter rel="noopener noreferrer" à la balise a

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

Explication : Lorsque vous n'utilisez pas le code rel, l'utilisation de target='_blank' est considérée comme une faille de sécurité. Les nouvelles pages peuvent accéder à votre objet window via window.opener, vous pouvez donc utiliser window.opener.location = newURL vers Votre page navigue vers un URL différente, ce qui signifie que je peux contrôler où va votre page, donc ce n'est pas sûr, avertissement. . . Lorsque nous utilisons rel = 'noopener noreferrer', nous obtiendrons un null via window.opener, nous ne pouvons rien faire.

Google a expliqué que bien sûr il faut utiliser un moyen scientifique de surfer sur Internet, bien sûr j'ai aussi pris une longue photo, hehe

2. Problèmes causés par href=""

L'attribut href nécessite une valeur valide pour être accessible. Fournissez une adresse valide et navigable comme valeur href. Si vous ne pouvez pas fournir un href valide, mais que vous avez toujours besoin que l'élément ressemble à un lien, utilisez un bouton et modifiez-le avec les styles appropriés. En savoir plus : https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/HEAD/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

Le message d'avertissement est causé par le code suivant

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

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

export default Test

En fait, mon intention initiale est très simple, c'est-à-dire que la balise a est simplement un événement de clic, mais le contrôle doit me signaler une erreur d'avertissement aussi importante. En termes simples, vous devez fournir un attribut href valide. . .

Donc, nous ajoutons un attribut href Après une période de test, il semble que seul href = "#!" peut être utilisé normalement, et la console du navigateur et la ligne de commande sont normales. . .

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

Bien sûr, il existe une autre solution : nous désactivons le plug-in de détection, comme suit, trouvons le fichier package.json du projet et le désactivons simplement.

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

De cette façon, nous utilisons toujours la méthode d'écriture ci-dessus sans la changer. . . Voyons donc comment est l'explication officielle, pourquoi nous utiliser pour fournir un attribut href valide

github : Explication officielle , si vous ne pouvez pas entrer, il y a aussi gitee sur gitee : Explication officielle , bien sur tout en anglais, je traduirai directement en un clic, et vous pourrez voir vaguement l'explication.

Oui, c'est comme ça. . .