教练，怎么在vue项目里写react？

1.前言

我承认了我是标题党，本篇文章是在vue项目里写tsx的一篇介绍。作为一个reacter，目前的业务天天使用vue2+ts让我十分的不舒服。我对于vue也不是很熟悉，想回到我的react时代。于是在查询官网之后发现在vue里面写jsx也挺有意思的，遂记录。

2.正文

vue2+ts的项目配置这里就不展开了，网上一搜一大推。

index.vue是页面路由，存放各个组件和公用逻辑。components文件夹中存放我的tsx组件。

接下来就开始写tsx。

你可以直接创建jsx/tsx文件

这次的项目结构是这样的：

在vue文件里这么使用

 
 
 
 
    
  
  
  
  
  1. // index.vue 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. import { Component, Vue } from "vue-property-decorator"; 
    6. 
  
  
  
  
  6. import Common from "./components/Common"; 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8. @Component({ 
    9. 
  
  
  
  
  9.   name: "App", 
    10. 
  
  
  
  
  10.   components: { 
    11. 
  
  
  
  
  11.     Common, 
    12. 
  
  
  
  
  12.   }, 
    13. 
  
  
  
  
  13. }) 
    14. 
  
  
  
  
  14. export default class App extends Vue { 
    15. 
  
  
  
  
  15.   private list = ["我要去淘宝", "我要去百度", "我要去京东"]; 
    16. 
  
  
  
  
  16. } 
    17. 
  
  
  
  
  17.  
    18.

tsx这么写

 
 
 
 
    
  
  
  
  
  1. import { CreateElement } from 'vue'; 
    2. 
  
  
  
  
  2. import { Component, Vue, Prop } from 'vue-property-decorator'; 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. @Component({ 
    5. 
  
  
  
  
  5.     name: 'Common' 
    6. 
  
  
  
  
  6. }) 
    7. 
  
  
  
  
  7. export default class Common extends Vue { 
    8. 
  
  
  
  
  8.     @Prop(Object) opt!: any[] 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.     render(h: CreateElement) { 
    11. 
  
  
  
  
  11.         return  
    12. 
  
  
  
  
  12.             { 
    13. 
  
  
  
  
  13.                 this.opt.map((it) => { 
    14. 
  
  
  
  
  14.                     return {it} 
    15. 
  
  
  
  
  15.                 }) 
    16. 
  
  
  
  
  16.             } 
    17. 
  
  
  
  
  17.          
    18. 
  
  
  
  
  18.     } 
    19. 
  
  
  
  
  19. } 
    20.

在来看一下页面

这该死的react既视感，竟是如此的诱人

可能有心者注意到了 我还引用了一个 CreateElement ，这是干嘛的呢。这玩意叫 渲染函数 。不喜欢读vue那么大串的文档的兄弟看这里。简单解释：这个东西可以渲染一个vnode节点。 它比模板更接近编译器。 什么意思呢？意思就是模板语法也会编译成渲染函数。所以我们直接用渲染函数不就相当于节省了模板语法到渲染函数的过程。四舍五入项目性能又是一个大的提升！

简单介绍一下传参：

第一个参数 : {String | Object | Function} 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数。必填项。

第二个参数 : Object 一个与模板中 attribute 对应的数据对象。

第三个参数 : {String | Array} 文本节点或子级虚拟节点 (VNodes)。

渲染函数给vue带来了很多的灵活性，以前你想自定义在子组件里插入东西，得写一大堆的插槽。  。有了渲染函数我们可以这么玩。

 
 
 
 
    
  
  
  
  
  1. // 改造一下上面的index.vue的data 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   private list = [ 
    4. 
  
  
  
  
  4.     { render: () => ["a", { style: { color: "red" } }, "我要去淘宝"] }, 
    5. 
  
  
  
  
  5.     { render: () => ["a", { style: { color: "green" } }, "我要去京东"] }, 
    6. 
  
  
  
  
  6.     { render: () => ["a", { style: { color: "pink" } }, "我要去百度"] }, 
    7. 
  
  
  
  
  7.   ]; 
    8.

tsx中这么写：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.                 this.opt.map((it) => { 
    3. 
  
  
  
  
  3.                     return h(...it.render()) 
    4. 
  
  
  
  
  4.                 }) 
    5. 
  
  
  
  
  5.             } 
    6.

就可以渲染出花里胡哨的页面了

我们还可以这么玩：

 
 
 
 
    
  
  
  
  
  1. // tsx改造 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.             { 
    4. 
  
  
  
  
  4.                 this.opt.map((it) => { 
    5. 
  
  
  
  
  5.                     return it.render(h) 
    6. 
  
  
  
  
  6.                 }) 
    7. 
  
  
  
  
  7.             } 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11. 在index.vue页面我们就可以这么玩： 
    12. 
  
  
  
  
  12. // index.vue 
    13. 
  
  
  
  
  13. private list = [ 
    14. 
  
  
  
  
  14.     { 
    15. 
  
  
  
  
  15.       render: (h: CreateElement) => 
    16. 
  
  
  
  
  16.         h("a", { style: { color: "red", marginRight: "5px" } }, "我要去淘宝"), 
    17. 
  
  
  
  
  17.     }, 
    18. 
  
  
  
  
  18.     { 
    19. 
  
  
  
  
  19.       render: (h: CreateElement) => 
    20. 
  
  
  
  
  20.         h("a", { style: { color: "green", marginRight: "5px" } }, "我要去京东"), 
    21. 
  
  
  
  
  21.     }, 
    22. 
  
  
  
  
  22.     { 
    23. 
  
  
  
  
  23.       render: (h: CreateElement) => 
    24. 
  
  
  
  
  24.         h("a", { style: { color: "pink", marginRight: "5px" } }, "我要去百度"), 
    25. 
  
  
  
  
  25.     }, 
    26. 
  
  
  
  
  26.   ]; 
    27.

结果也是同样的花哨

我们同样可以渲染乱七八糟的标签！

 
 
 
 
    
  
  
  
  
  1. // index.vue改造 
    2. 
  
  
  
  
  2.  { 
    3. 
  
  
  
  
  3.       render: (h: CreateElement) => 
    4. 
  
  
  
  
  4.         h( 
    5. 
  
  
  
  
  5.           "h1", 
    6. 
  
  
  
  
  6.           { 
    7. 
  
  
  
  
  7.             style: { color: "green", marginRight: "5px" }, 
    8. 
  
  
  
  
  8.           }, 
    9. 
  
  
  
  
  9.           "我要去京东" 
    10. 
  
  
  
  
  10.         ), 
    11. 
  
  
  
  
  11.     }, 
    12.

我们可以随心所欲的在渲染函数中定义事件：

 
 
 
 
    
  
  
  
  
  1. // index.vue 
    2. 
  
  
  
  
  2. private list = [ 
    3. 
  
  
  
  
  3.    { 
    4. 
  
  
  
  
  4.       render: (h: CreateElement) => 
    5. 
  
  
  
  
  5.         h( 
    6. 
  
  
  
  
  6.           "a", 
    7. 
  
  
  
  
  7.           { 
    8. 
  
  
  
  
  8.             style: { color: "red", marginRight: "5px" }, 
    9. 
  
  
  
  
  9.             on: { 
    10. 
  
  
  
  
  10.               click: () => this.iWillGoWhere("TB"), 
    11. 
  
  
  
  
  11.             }, 
    12. 
  
  
  
  
  12.           }, 
    13. 
  
  
  
  
  13.           "我要去淘宝" 
    14. 
  
  
  
  
  14.         ), 
    15. 
  
  
  
  
  15.    }] 
    16. 
  
  
  
  
  16.     
    17. 
  
  
  
  
  17.  iWillGoWhere(type: string) { 
    18. 
  
  
  
  
  18.     const goWhere: any = { 
    19. 
  
  
  
  
  19.       TB: () => { 
    20. 
  
  
  
  
  20.         alert("我要去淘宝！"); 
    21. 
  
  
  
  
  21.       }, 
    22. 
  
  
  
  
  22.       JD: () => { 
    23. 
  
  
  
  
  23.         alert("我要去京东！"); 
    24. 
  
  
  
  
  24.       }, 
    25. 
  
  
  
  
  25.       BD: () => { 
    26. 
  
  
  
  
  26.         alert("我要去百度！"); 
    27. 
  
  
  
  
  27.       }, 
    28. 
  
  
  
  
  28.     }; 
    29. 
  
  
  
  
  29.     goWhere[type](); 
    30. 
  
  
  
  
  30.   } 
    31.

这样就可以啦！

结尾

本次文章是对vue灵活性使用的入门。请各位vue大佬不要喷我~

本文标题：教练，怎么在vue项目里写react？
当前地址：http://www.shufengxianlan.com/qtweb/news5/342455.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站导航知识

同城分类信息

界面设计　　 　内江做网站　　 　成都网站建设　　 　app开发　　 　网站建设费用　　 　做移动网站　　 　成都塑料加工　　 　成都机柜租用　　 　德阳东方电机技改服务有限公司　　 　四川艾名斯　　 　做网站的公司　　 　不锈钢防护栏　　 　衣柜书柜酒柜定制　　 　四川成都展柜定制厂家　　 　高端网站定制　　 　网页设计　　 　成都酒店服定制　　 　卖友情链接　　 　品牌网站定制　　 　微信服务号订阅号开发