Eu provavelmente deveria ter aprendido isso há muito tempo, mas, infelizmente, aqui estamos. Acontece que você pode dizer qual função deseja que o JSX use. Sim, JSX realmente só tem uma transformação primária que ele faz. Ele transforma os colchetes angulares em JavaScript em uma chamada de função. Portanto, se você escrever uma linha como esta em JavaScript:
Hello Após o processamento (provavelmente com Babel e o plugin JSX), você obterá, por padrão:
React.createElement("div", ( class: "big" ), "Hello");Mas se você incluir um comentário de diretiva informando ao JSX que deseja usar sua própria função, poderá alterar essa saída:
/* @jsx myFunction */ Hello Torna-se em:
/* @jsx myFunction */ myFunction("div", ( class: "big" ), "Hello");Isso significa que podemos escrever nossa própria função. Meio estranho, mas tudo bem.
O caso de uso real é para bibliotecas não React, como Preact. Aprendi isso observando os exemplos de Jason Miller:
O Vue também pode ser feito dessa maneira. Observe que o Vue e o Preact fornecem esta hfunção especial projetada para isso:
Valeri Karpov também tem alguns casos de uso interessantes em sua postagem no blog, “Uma visão geral do JSX com 3 exemplos não reativos”.