web-dev-qa-db-fra.com

Comment puis-je supprimer l'avertissement «La balise <some-tag> n'est pas reconnue dans ce navigateur» dans React?

J'utilise des éléments avec des noms de balises personnalisés dans React et j'obtiens un mur de ces erreurs. Il y a un problème avec GitHub sur le sujet ( https://github.com/hyperfuse/ react-anime/issues/ ) dans lequel quelqu'un déclare:

Il s'agit d'un nouveau message d'avertissement dans React 16. N'a rien à voir avec anime/react-anime et cet avertissement peut être ignoré en toute sécurité.

C'est bien qu'il puisse être ignoré en toute sécurité, mais cela ne passera toujours pas à l'examen lorsque mon code remplira la console de messages d'erreur inutiles.

Comment puis-je supprimer ces avertissements?

reactjswarnings
14
Seph Reed

Je ne dis pas que c'est une chose correcte que vous devriez vraiment faire, mais vous pouvez accrocher console.error et filtrez ce message en le mettant quelque part avant react-anime est chargé:

const realError = console.error;
console.error = (...x) => {
  // debugger;
  if (x[0] === 'Warning: The tag <g> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.') {
    return;
  }
  realError(...x);
};

Il semblait fonctionner sur le exemple qui a été publié dans le problème GitHub que vous avez lié au moins. : 3

4
John Jones

Je ne crois pas qu'il existe une méthode intégrée pour supprimer le message d'erreur.

Le message d'avertissement est enregistré à droite ici dans react-dom . Vous pouvez bifurquer react-dom et simplement supprimer le message d'erreur. Pour un changement aussi petit que cela, il serait peut-être utile d'utiliser quelque chose comme patch-package , donc vous n'avez pas à maintenir un fork.

2
TLadd

J'ai trouvé un correctif potentiel pour ce problème - si vous utilisez un plugin (et potentiellement dans d'autres circonstances), vous pouvez utiliser l'attribut is.

Trouvé ici lorsque vous travaillez avec X3d - il suffit d'écrire <scene is="x3d" .../> travaux

1
triple

Ma solution a été de créer un composant enveloppe qui rend <div> avec les classes souhaitées:

import React, {Component, DetailedHTMLFactory, HTMLAttributes} from "react";
import classNames from "classnames";

export default class SimpleTagComponent extends Component<SimplePropTypes>{
    baseClassName = 'simpleComponent'

    render() {
        return React.createElement(
            'div',
            {
                ...this.props,
                className: classNames(this.baseClassName, this.props.className),
            },
            this.props.children
        );
    }
}

type SimplePropTypes = HTMLAttributes<HTMLDivElement>

export class MyTag extends SimpleTagComponent {
    baseClassName = 'my'
}
0
d9k