Je veux donner à l'utilisateur une interface où les accessoires sont indépendants de la capitalisation. Par exemple:

<MyComponent prop1="value1" Prop2="value2" />
<MyComponent ProP1="value1" prop2="value2" />

Les deux doivent être valides et fonctionner de la même manière. Bien que je veuille éviter de modifier les accessoires d'origine, comme les accessoires peuvent contenir un grand ensemble de données, je prévois d'éviter de les cloner également. Y a-t-il un bon moyen d'y parvenir?

0
Govinda Totla 31 août 2020 à 19:39

2 réponses

Meilleure réponse

Je ne recommanderais pas cela, mais ce n'était pas votre question. Votre question était de savoir si vous pouvez . :-D Oui, vous pouvez, via la déstructuration avec des valeurs par défaut. Par exemple:

const MyComponent = ({Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}) => {
    // Use `prop1` and `prop2` here
};

Ou comme déclaration de fonction:

function MyComponent({Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}) {
    // Use `prop1` and `prop2` here
}

Ou dans le render d'un composant de classe:

render() {
    const {Prop1, prop1 = Prop1, Prop2, prop2 = Prop2} = this.props;
    // Use `prop1` and `prop2` here
}

Le paramètre de déstructuration {Prop1, prop1 = Prop1, Prop2, prop2 = Prop2} dit:

  • Extrait Prop1 (sera undefined s'il n'est pas fourni)
  • Extraire prop1 (sera undefined si non fourni) et la valeur par défaut de Prop1 si elle n'est pas fournie / est undefined
  • (Idem pour Prop2 / prop2)

Voici un exemple (en utilisant simplement une fonction simple, car il s'agit de déstructurer):

function example({Prop1, prop1 = Prop1, Prop2, prop2 = Prop2}) {
    console.log(`prop1 = "${prop1}"`);
    console.log(`prop2 = "${prop2}"`);
}

example({Prop1: "a1", prop2: "b1"});
example({prop1: "a2", Prop2: "b2"});

(Je suis connu pour utiliser ceci pour contourner la bêtise class contre className: {"class": cls, className = cls} puis utiliser className dans le code.)


Alternativement, puisque props est un objet, vous pouvez convertir tous les noms d'accessoires en minuscules:

const {prop1, prop2} = Object.fromEntries(
    Object.entries(props).map(([name, value]) => [name.toLowerCase(), value])
);
2
T.J. Crowder 31 août 2020 à 17:18

Essayez quelque chose comme ceci:

const inpProps = {};
Object.keys(props).forEach((key) => {
    inpProps[key.toLowerCase()]= props[key];
});
1
Umesh Maharshi 31 août 2020 à 17:16