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

贫僧Andy
  • 8

.tsx文件编译后直接输出

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

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

回复
阅读 293
2 个回答

你可以把jsx设置为react

编译后的代码就成这样了

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

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

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

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

你可以使用 reactcreateElement,也可以使用 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 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏