教练，vue项目中react怎么写？

1。前言，我承认我是头条党。本文是在vue项目中写的tsx的介绍。作为reactor，现在的业务天天用vue2+ts，让我很不适应。我对vue不是很熟悉，想回到我的react时代。于是查了下官网，发现用vue写jsx也很有意思，于是记录下来。2.文vue2+ts的项目配置这里就不展开了，网上大推。index.vue是页面路由，存放各种组件和公共逻辑。components文件夹存放我的tsx组件。然后开始写tsx。您可以直接创建jsx/tsx文件。这次的项目结构是这样的：在vue文件中使用这个//index.vuetsxso写import{CreateElement}来自'vue'；import{Component,Vue,Prop}from'vue-property-decorator';@Component({name:'Common'})exportdefaultclassCommonextendsVue{@Prop(Object)opt!:any[]render(h:CreateElement){return{this.opt.map((it)=>{return{it}})}}}来看看页面该死的react视觉感，太吸引人了。可能有兴趣的人注意到了，我还引用了一个CreateElement。这个是来做什么的？这个东西叫做渲染函数。不喜欢看vue那么大系列文档的兄弟看这里。简单解释：这个东西可以渲染一个vnode节点。它比模板更接近编译器。这意味着什么？这意味着模板语法也被编译成渲染函数。所以如果我们直接使用渲染函数，相当于省去了从模板语法到渲染函数的过程。四舍五入的项目性能是另一个很大的提升！参数传递简介：第一个参数：{String|对象|Function}HTML标签名称、组件选项对象或解析上述任何内容的异步函数。必填项目。第二个参数：Object模板中属性对应的数据对象。第三个参数：{String|Array}文本节点或子虚拟节点(VNodes)。渲染函数为Vue.js带来了很大的灵活性。以前，如果你想在子组件中自定义和插入东西，你必须写很多插槽。<插槽>。有了render函数我们就可以这样玩了。//修改上面index.vue的dataprivatelist=[{render:()=>["a",{style:{color:"red"}},"我要去淘宝了"]},{render:()=>["a",{style:{color:"green"}},"我要去京东"]},{render:()=>["a",{style:{color:"粉色"}},"我要去百度"]},];这是用tsx写的：{this.opt.map((it)=>{returnh(...it.render())})}现在可以渲染花哨的页面了，我们仍然可以这样玩：//tsx转换{this.opt.map((it)=>{returnit.render(h)})}在索引处。我们可以在vue页面这样玩：//index.vueprivatelist=[{render:(h:CreateElement)=>h("a",{style:{color:"red",marginRight:"5px"}},"我要去淘宝"),},{render:(h:CreateElement)=>h("a",{style:{color:"green",marginRight:"5px"}},"I我要去京东了"),},{render:(h:CreateElement)=>h("a",{style:{color:"pink",marginRight:"5px"}},"我要去百度"),},];结果是一样的，我们也可以渲染凌乱的标签！//index.vuetransformation{render:(h:CreateElement)=>h("h1",{style:{color:"green",marginRight:"5px"},},"我要去京东了"),}，我们可以在渲染函数中任意定义事件：//index.vueprivatelist=[{render:(h:CreateElement)=>h("a",{style:{color:"red",marginRight:"5px"},on:{click:()=>this.iWillGoWhere("TB"),},},"我要去淘宝"),}]iWillGoWhere(type:string){constgoWhere:any={TB:()=>{alert("我要去淘宝了！");},JD:()=>{alert("我要去京东了！");},BD:()=>{alert("我要去百度了！");},};去哪里[类型]（）；}就是这样！最后，本文是对Vue灵活性的介绍，请勿喷我~