Actuellement, dans mon application React, j'ai ceci,

<input style={{ borderColor: valid ? null : "red", boxShadow: valid ? null : "rgb(2, 0, 0)"}} />

Si j'ai plus de style à faire, cela n'a pas de sens de vérifier la même condition encore et encore, non? Je souhaite rendre l'ensemble de l'attribut style facultatif; quelque chose comme ça,

<input valid ? null : style={{ borderColor: "red", boxShadow: "rgb(2, 0, 0)"}} />

Mais je sais que ce n'est pas la bonne syntaxe. N'y a-t-il pas une meilleure façon de faire cela?

2
Karthik G M 2 juin 2020 à 18:51

4 réponses

Meilleure réponse

Vous devez mettre la logique dans l'attribut style et lui passer un élément neutre en cas de validité (ou l'extraire dans une variable). Je pense que cela devrait faire l'affaire:

<input style={valid ? {} : { borderColor: "red", boxShadow: "rgb(2, 0, 0)"}} />
1
Benjamin Eckardt 2 juin 2020 à 16:01

Vous pouvez définir vos styles en tant qu'objet dans la méthode de rendu, puis l'assigner éventuellement comme accessoire au composant en utilisant ternaire et spread.

const styles = {
    borderColor: "red",
    boxShadow: "rgb(2, 0, 0)",
    // etc...
};

return (
    <input { ...(valid ? { styles } : {}) } />
);
2
Ghassen Louhaichi 2 juin 2020 à 16:00

Une option serait de créer une variable:

const inputStyle = !valid ? {
  borderColor: "red",
  boxShadow: "rgb(2, 0, 0)"
} : {};

<input style={inputStyle}/>

C'est la même chose que vous avez actuellement mais vous pouvez ajouter de nouvelles propriétés comme vous le souhaitez dans la variable sans augmenter le nombre de comparaisons dans la balise input.

2
Gustavo Vieira 2 juin 2020 à 21:51

Vous devez utiliser className pour ajouter des classes de style de manière conditionnelle.Vous pouvez utiliser le package classnames comme répondu au question

3
SoftwareEnggUmar 2 juin 2020 à 16:05