Styling React-Router-Dom Link à l'aide de composants de style Obtenir un avertissement lorsque vous passez des accessoires

Question

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={props.link} tempLeftProp={props.toLeft}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}

Je reçois l'erreur:

AVERTISSEMENT : React= ne reconnaît pas le projet tempLeftProp Prop sur un élément DOM. Si vous voulez intentionnellement qu'il apparaisse dans le DOM en tant qu'attribut personnalisé, Épreez-le comme minuscule templeftprop à la place. Si vous le passez accidentellement d'un composant parent, retirez-le de l'élément DOM.

Je passe des accessoires à mes composants de style tout le temps. Je ne sais pas si le problème est que je coime un composant Link au lieu d'un élément HTML régulier.

QUESTION

Pourquoi suis-je cette erreur? Est-il sécuritaire de simplement l'ignorer?

PS: Les styles sont appliqués comme prévu.

Answer 1

une autre chose que vous pouvez essayer le "à" accessoire sur une balise de liaison de réaction peut prendre deux valeurs différentes une chaîne ou un objet.

1. Si c'est une chaîne, elle représente la voie absolue de relier, par exemple. /users/123 (Les chemins relatifs ne sont pas pris en charge).

2. Si c'est un objet, il peut avoir quatre clés:

   • pathname: une chaîne représentant le chemin à lier.
   • Query: un objet de key:value paires à soigner.
   • hachage: un hachage à mettre dans l'URL, par ex. #a-hash.
   • état: Etat de persister à l'emplacement.

votre code ci-dessus peut être représenté comme suit:

import styled from 'styled-components';
import {Link} from 'react-router-dom';

const LS = {};

LS.NavFixedItem_LINK = styled(Link)`

  display: flex;
  justify-content: ${props => props.to.state.tempLeftProp ? 'flex-start' : 'center'};
  align-items: center;
`;

function NavFixedItem(props) {
  return(
    <LS.NavFixedItem_LINK to={{ pathname: props.link, state: {tempLeftProp: props.toLeft} }}>
      {props.name}
    </LS.NavFixedItem_LINK>
  );
}