Probablemente debería haber aprendido esto hace mucho tiempo, pero por desgracia, aquí estamos. Resulta que puedes decir qué función quieres que use JSX. Sí, JSX realmente solo tiene una transformación primaria. Convierte los corchetes angulares en JavaScript en una llamada a función. Entonces, si escribe una línea como esta en JavaScript:
Hello Después del procesamiento (probablemente con Babel y el complemento JSX), obtendrá, de forma predeterminada:
React.createElement("div", ( class: "big" ), "Hello");Pero si incluye un comentario de directiva que le dice a JSX que desea usar su propia función, puede cambiar esa salida:
/* @jsx myFunction */ Hello Se convierte en:
/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");Eso significa que podemos escribir nuestra propia función. Un poco raro, pero está bien.
El caso de uso real es para bibliotecas que no son de React, como Preact. Aprendí esto mirando los ejemplos de Jason Miller:
Vue también se puede hacer de esta manera. Tenga en cuenta que tanto Vue como Preact incluyen esta hfunción especial diseñada para esto:
Valeri Karpov también tiene algunos casos de uso interesantes en su publicación de blog, "Una descripción general de JSX con 3 ejemplos de no reacción".