JSX Intermédiaire

Décomposition des props

Il est possible d'utiliser un objet représentant les props d'un élément React et de le décomposer afin de créer rapidement et efficacement un élément.

Par exemple, imaginons l'objet suivant:

const className = "blue";
const children = "Marshall Mathers";
const props = {className, children};

plutôt que d'avoir à écrire le code suivant:

const element = (
  <div class={props.className}>
    {props.children}
  </div> 
)

Qui est redondant, surtout si plusieurs props sont présente, il est possible d'écrire le code équivalent avec l'API React:

const element = React.createElement('div', props);

Ou encore mieux, directement JSX avec une décomposition:

Priorité des props

Attention, l'ordre d'apparition des props à un impact sur leur priorité. Par exemple, si une propriété est définie sur un élément avant la décomposition des props, elle agira comme valeur initiale, mais sera écrasée sur si celle-ci est redéfinie dans les props en question.

Par exemple si className est défini en premier:

Dans ce cas, la classe appliquée est "blue" 🔵 et non "red" 🔴, car la classe définit les props écrasent la classe initiale. Cependant, si l'ordre avait été inversé:

La classe aurait eu préséance sur la classe définit dans les props.

Combinaison de props

Certaines propriétés identiques doivent parfois être combinées et non écrasées. Dans ce cas, il est possible d'y arriver à l'aide d'une décomposition astucieuse.

Par exemple, si la classe badge doit être appliquée par défaut, mais aussi la classe blue passée en paramètre:

Dans ce cas, il est possible de décomposer le paramètre reçu, en spécifiant que la propriété className doit être isolée et que toutes les autres doivent être regroupées dans un objet nommé others.

Combinaison de styles en ligne

Il suffit de décomposer la propriété de style à l'intérieur des doubles accolades {{...}} avec les autres styles en ligne.

Par exemple:

Valeur par défaut

Toujours à l'aide d'une décomposition, il est possible de spécifier une valeur par défaut à une propriété. Pour ce faire, il faut l'isolée et ensuite lui attribuer une valeur à l'aide du symbole =.

Par exemple, pour donner la valeur "blue" à className si aucune classe n'est définie, il est possible de le faire ainsi: