jsx如何能直接识别div输出？不使用react或者vue

Question

.tsx文件编译后直接输出

export default function Footer() {
  return <div>jgsm</div>;
}

类似于这样的
在页面直接渲染内容
设想在html+jquery+ts实现类似vue，react的写法,但是现在编译不通过，有什么好的设想没请指教...

Answer 1

你可以把jsx设置为react

编译后的代码就成这样了

function Footer() {
  return /*#__PURE__*/React.createElement("div", null, "jgsm");
}

然后在实现自己的渲染逻辑

const React = {
  createElement(type, props, ...children) {
     
  }
}

Answer 2

首先在浏览器中无法直接使用 JSX，它是由　React 提出的一种 JS 语法扩展，需依靠其内置的 createElement 方法来将 JSX 代码实例化。

你可以使用 react 的 createElement，也可以使用 vue 的，当然你自己仿照框架自己写一个 createElement 方法也可以。

最后，在查资料的过程中，看到 React 17.x 好像准备把 JSX transform 给拆分出来，介绍全新的 JSX 转换 – React Blog，你可以去了解以下。

参考资源：
react/index.js at 0e100ed00fb52cfd107db1d1081ef18fe4b9167f · facebook/react
vue/create-element.js at 0603ff695d2f41286239298210113cbe2b209e28 · vuejs/vue

Introducing the New JSX Transform – React Blog
7.9.0 Released: Smaller preset-env output, Typescript 3.8 support and a new JSX transform · Babel

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。