如何自定义 JSX 的实现

使用 React 的前端开发中，常会使用 JSX 语法，JSX 会经过编译生成 React.createElement 的调用，如：

// JSX
const temp = <div>Hello world</div>

// 编译后
const temp = React.createElement('div', null, 'Hello world')

JSX 语法具有一定的便利性和美观性，如果能将编译结果中的 React.createElement 替换成任意函数，这能给我们的开发带来无限的可能。

那么怎么才能做到呢？

JSX 语法是使用 babel 编译成 js 的，那么答案也就在 babel 中。参考 babel 插件 @babel/plugin-transform-react-jsx。

使用步骤

1. 安装插件

   yarn add -D @babel/plugin-transform-react-jsx
   

2. 配置 babel

   {
     "plugins": [
       [
         "@babel/plugin-transform-react-jsx", 
         { 
           "pragma": "Preact.h", // default pragma is React.createElement 
           "pragmaFrag": "Preact.Fragment", // default is React.Fragment
           "throwIfNamespace": false // defaults to true 
         }
       ] 
     ]
   }
   

3. 编写代码

   /** @jsx Preact.h */ 
   import Preact from 'preact';
   const temp = <div>Hello world</div>;
   

4. 编译结果

   /** @jsx Preact.h */ 
   import Preact from 'preact';
   const temp = Preact.h('div', null, 'Hello world')
   

例子中用了 Preact.h ，可以替换成任意的方法，如此，JSX 便具有了无限可能。