web-dev-qa-db-fra.com

React wrapper: React ne reconnaît pas le prop `staticContext` sur un élément DOM

J'essaie de créer un composant wrapper autour du composant react-router-dom NavLink.

J'aimerais que mon composant personnalisé accepte tous les accessoires NavLinks et les mette en proxy jusqu'à NavLink.

Cependant, lorsque je fais cela, je reçois:

Avertissement: React ne reconnaît pas le staticContext prop d'un élément DOM. Si vous souhaitez que celui-ci apparaisse dans le DOM en tant qu'attribut personnalisé, écrivez-le en minuscule staticcontext Si vous l'avez accidentellement passé d'un composant parent, supprimez-le de l'élément DOM.

Une démonstration de travail du problème peut être trouvée ici:

reactjsreact-routerreact-router-dom
20
Nicolas Widart

Il y a un moyen de surmonter qui utilise:

const { to, staticContext, ...rest } = this.props;

Donc, votre ...rest ne contiendra jamais staticContext

34
Khoa

Ceci est un problème courant avec une solution simple comme documenté dans le documentation React :

L'avertissement de propriété inconnue se déclenchera si vous tentez de restituer un élément DOM avec une propriété non reconnue par React en tant qu'attribut/propriété DOM valide. Veillez à ce que vos éléments DOM ne avoir des accessoires parasites flottant autour.

L'opérateur spread peut être utilisé pour extraire les variables des accessoires et mettre les accessoires restants dans une variable.

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

Vous pouvez également affecter les accessoires à un nouvel objet et supprimer les clés que vous utilisez du nouvel objet. Veillez à ne pas supprimer les accessoires de l'objet this.props d'origine, car cet objet doit être considéré comme immuable.

function MyDiv(props) {

  const divProps = Object.assign({}, props);
  delete divProps.layout;

  if (props.layout === 'horizontal') {
    return <div {...divProps} style={getHorizontalStyle()} />
  } else {
    return <div {...divProps} style={getVerticalStyle()} />
  }
}
4
Nathaniel Hill

La réponse donnée par le React docs n’était pas tout à fait suffisante pour ma situation. J’en ai donc trouvé/développé une qui n’est pas parfaite, mais qui au moins n’est pas si fastidieuse.

Vous pouvez voir le Q/A dans lequel il est apparu ici: Qu'est-ce que la fonction Reacts pour vérifier si une propriété s'applique?

Le Gist est, utilisez une fonction pour choisir les mauvais accessoires pour vous.

const SPECIAL_PROPS = [
    "key",
    "children",
    "dangerouslySetInnerHTML",
];

const defaultTester = document.createElement("div")
function filterBadProps(props: any, tester: HTMLElement = defaultTester) {
    if(process.env.NODE_ENV !== 'development') { return props; }

    // filter out any keys which don't exist in reacts special props, or the tester.
    const out: any = {};
    Object.keys(props).filter((propName) => 
        (propName in tester) || (propName.toLowerCase() in tester) || SPECIAL_PROPS.includes(propName)
    ).forEach((key) => out[key] = props[key]);

    return out;
}

Personnellement, j’ai senti que l’avertissement était complètement inutile au départ, j’ai donc ajouté une ligne qui saute complètement le contrôle en dehors du mode de développement (et les avertissements sont supprimés). Si vous estimez que les avertissements ont du mérite, supprimez simplement la ligne:

if(process.env.NODE_ENV !== 'development') { return props; }

Vous pouvez l'utiliser comme ceci:

public render() {
    const tooManyProps = this.props;
    const justTheRightPropsForDiv = filterBadProps(tooManyProps);
    const justTheRightPropsForSpan = filterBadProps(tooManyProps, document.createElement("span"));

    return (<div {...justTheRightPropsForDiv}>
        <span {...justTheRightPropsForSpan} />
    </div>)
}
2
Seph Reed