J'aurais probablement dû l'apprendre il y a longtemps, mais hélas, nous y sommes. Il s'avère que vous pouvez dire quelle fonction vous voulez que JSX utilise. Oui, JSX n'a vraiment qu'une seule transformation principale. Il transforme les crochets angulaires en JavaScript en un appel de fonction. Donc, si vous écrivez une ligne comme celle-ci en JavaScript:
Hello Après traitement (probablement avec Babel et le plugin JSX), vous obtiendrez par défaut:
React.createElement("div", ( class: "big" ), "Hello");Mais si vous incluez un commentaire de directive indiquant à JSX que vous souhaitez utiliser votre propre fonction, vous pouvez modifier cette sortie:
/* @jsx myFunction */ Hello Se transforme en:
/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");Cela signifie que nous pouvons écrire notre propre fonction. Un peu bizarre, mais OK.
Le cas d'utilisation réel concerne les bibliothèques non React, comme Preact. J'ai appris cela en regardant les exemples de Jason Miller:
Vue peut également être fait de cette façon. Notez que Vue et Preact proposent cette hfonction spéciale conçue pour cela:
Valeri Karpov a également des cas d'utilisation intéressants sur son article de blog, «Un aperçu de JSX avec 3 exemples sans réaction».