react 中使用jsx

在vue3中使用jsx

//npm引入插件
@vue/babel-plugin-jsx
//修改bable.config.js 添加如下
 plugins: ["@vue/babel-plugin-jsx"]
//可以使用jsx了

Vue3 使用 jsx scoped标签不生效

//如果在.vue文件中使用jsx style标签加上scoped标签后  css效果不生效
//是因为dom元素丢失scopedId属性 需要从新给予scopedId

//解决方法如下
import { createApp, withScopeId, getCurrentInstance } from "vue";
//获取到scopedId
const scopedId=getCurrentInstance().type.__scopeId
//利用 withScopeId 方法给予 scopedId
withScopeId(()=><h1></h1>)()
            
//如果大量使用jsx  这样方式就不可取 需要封装成一个方法 或者挂载在vue原型上 在render中可以访问this 所以可以调用this方法
//在main.js中引入
import { createApp, withScopeId, getCurrentInstance } from "vue";
//全局挂载
app.config.globalProperties.$h = dom => {
  const withScope = withScopeId(getCurrentInstance().type.__scopeId);
  return withScope(dom)();
};
//调用
export default defineComponent({
  name: "event",
  render() {
    return this.$h(() => <h1 class="test">帅哥</h1>);
  }
});             

vue3使用v-for

//特别让人无奈 查了好多文档没有看见可以实现的方案 所以只能取jsx的方法
<ul>
    {list.map(item=><h1>{item}</h1>)}  
</ul>