日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
教練，怎么在vue項(xiàng)目里寫react？

1.前言

我承認(rèn)了我是標(biāo)題黨，本篇文章是在vue項(xiàng)目里寫tsx的一篇介紹。作為一個(gè)reacter，目前的業(yè)務(wù)天天使用vue2+ts讓我十分的不舒服。我對(duì)于vue也不是很熟悉，想回到我的react時(shí)代。于是在查詢官網(wǎng)之后發(fā)現(xiàn)在vue里面寫jsx也挺有意思的，遂記錄。

2.正文

vue2+ts的項(xiàng)目配置這里就不展開了，網(wǎng)上一搜一大推。

index.vue是頁(yè)面路由，存放各個(gè)組件和公用邏輯。components文件夾中存放我的tsx組件。

接下來(lái)就開始寫tsx。

你可以直接創(chuàng)建jsx/tsx文件

這次的項(xiàng)目結(jié)構(gòu)是這樣的：

在vue文件里這么使用

 
 
 
 
    
  
  
  
  
  1. // index.vue 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.  
    5.

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.

在來(lái)看一下頁(yè)面

這該死的react既視感，竟是如此的誘人

可能有心者注意到了 我還引用了一個(gè) CreateElement ，這是干嘛的呢。這玩意叫 渲染函數(shù) 。不喜歡讀vue那么大串的文檔的兄弟看這里。簡(jiǎn)單解釋：這個(gè)東西可以渲染一個(gè)vnode節(jié)點(diǎn)。 它比模板更接近編譯器。 什么意思呢？意思就是模板語(yǔ)法也會(huì)編譯成渲染函數(shù)。所以我們直接用渲染函數(shù)不就相當(dāng)于節(jié)省了模板語(yǔ)法到渲染函數(shù)的過(guò)程。四舍五入項(xiàng)目性能又是一個(gè)大的提升！

簡(jiǎn)單介紹一下傳參：

第一個(gè)參數(shù) : {String | Object | Function} 一個(gè) HTML 標(biāo)簽名、組件選項(xiàng)對(duì)象，或者 resolve 了上述任何一種的一個(gè) async 函數(shù)。必填項(xiàng)。

第二個(gè)參數(shù) : Object 一個(gè)與模板中 attribute 對(duì)應(yīng)的數(shù)據(jù)對(duì)象。

第三個(gè)參數(shù) : {String | Array} 文本節(jié)點(diǎn)或子級(jí)虛擬節(jié)點(diǎn) (VNodes)。

渲染函數(shù)給vue帶來(lái)了很多的靈活性，以前你想自定義在子組件里插入東西，得寫一大堆的插槽。  。有了渲染函數(shù)我們可以這么玩。

 
 
 
 
    
  
  
  
  
  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.

就可以渲染出花里胡哨的頁(yè)面了

我們還可以這么玩：

 
 
 
 
    
  
  
  
  
  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頁(yè)面我們就可以這么玩： 
    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.

結(jié)果也是同樣的花哨

我們同樣可以渲染亂七八糟的標(biāo)簽！

 
 
 
 
    
  
  
  
  
  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.

我們可以隨心所欲的在渲染函數(shù)中定義事件：

 
 
 
 
    
  
  
  
  
  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.

這樣就可以啦！

結(jié)尾

本次文章是對(duì)vue靈活性使用的入門。請(qǐng)各位vue大佬不要噴我~


文章題目：教練，怎么在vue項(xiàng)目里寫react？
鏈接地址：http://www.5511xx.com/article/djgeeoi.html