前言

在日常開發(fā)中vue的模版語法在大多數(shù)情況都能夠滿足我們的需求，但是在一些復(fù)雜的業(yè)務(wù)場景中使用模版語法就有些麻煩了。這個時(shí)候靈活的JSX/TSX渲染函數(shù)就能派上用場了，大多數(shù)同學(xué)的做法都是將*.vue文件改為*.tsx或者*.jsx文件。其實(shí)我們可以直接在*.vue文件中直接使用JSX/TSX渲染函數(shù)。

什么場景需要使用JSX/TSX渲染函數(shù)

假設(shè)我們現(xiàn)在有這樣的業(yè)務(wù)場景，在我們的頁面中有個list數(shù)組。我們需要去遍歷這個數(shù)組，根據(jù)每一項(xiàng)的item去渲染不同的組件。如果tem的數(shù)據(jù)滿足條件A，那么就渲染組件A。如果item的數(shù)據(jù)滿足條件B，那么就渲染組件B。如果item的數(shù)據(jù)滿足條件C，那么就渲染組件C。

如果我們使用vue模版語法去實(shí)現(xiàn)這個需求，我們的Page.vue文件的代碼就需要是這樣的：

<template>
  <template v-for="item in list">
    <ComponentA v-if="isComponentA(item)" />
    <ComponentB v-else-if="isComponentB(item)" />
    <ComponentC v-else-if="isComponentC(item)" />
  </template>
</template>

<script setup lang="ts">
import ComponentA from "./component-a.vue";
import ComponentB from "./component-b.vue";
import ComponentC from "./component-c.vue";

const list: Array<number> = [1, 5, 3, 2, 1];

const isComponentA = (item): boolean => {
  return item % 3 === 0;
};

const isComponentB = (item): boolean => {
  return item % 3 === 1;
};

const isComponentC = (item): boolean => {
  return item % 3 === 2;
};
</script>

這樣雖然可以實(shí)現(xiàn)功能，但是明顯不夠優(yōu)雅，領(lǐng)導(dǎo)code review時(shí)看了直呼搖頭。

在*.jsx/tsx文件中使用JSX/TSX渲染函數(shù)

此時(shí)機(jī)智的小伙伴會說，我們可以使用vue的setup方法使用JSX/TSX渲染函數(shù)實(shí)現(xiàn)。確實(shí)可以，我們來看看具體實(shí)現(xiàn)的代碼：

import { defineComponent } from "vue";
import ComponentA from "./component-a.vue";
import ComponentB from "./component-b.vue";
import ComponentC from "./component-c.vue";

export default defineComponent({
  setup() {
    const list = [1, 5, 3, 2, 1, 0];

    function renderDataList(data: Array<number>) {
      return data?.map((val) => {
        if (val % 3 === 0) {
          return <ComponentA />;
        } else if (val % 3 === 1) {
          return <ComponentB />;
        } else {
          return <ComponentC />;
        }
      });
    }

    return () => {
      return <div>{renderDataList(list)}</div>;
    };
  },
});

首先我們需要將原來的Page.vue文件改為Page.tsx文件，然后我們需要將原來寫在template中的代碼摞到setup中。這種寫法有如下幾個痛點(diǎn)：
由于沒有使用vue的模版語法，所以vue內(nèi)置的v-model等指令和項(xiàng)目中自己封裝的指令等都不能使用了，只能使用js去自己實(shí)現(xiàn)。

按照常規(guī)的思維，setup直接返回一個值就行了，但是如果你這樣寫就會收到這樣的報(bào)錯：

[Vue warn]: setup() should not return VNodes directly - return a render function instead.

原因是setup()?函數(shù)在每個組件中只會被調(diào)用一次，而返回的渲染函數(shù)將會被調(diào)用多次。這樣就導(dǎo)致我們的代碼只能在外面包裹一層匿名函數(shù):

return () => {
  return <div>{renderDataList(list)}</div>;
};

在*.vue文件中使用JSX/TSX渲染函數(shù)

那么有沒有方法可以讓我們在使用JSX/TSX渲染函數(shù)的同時(shí)，也可以在vue文件中使用模版語法呢？答案是：當(dāng)然可以！

首先我們需要導(dǎo)入@vitejs/plugin-vue-jsx

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
}

然后我們需要將vue文件的script標(biāo)簽的lang設(shè)置為tsx或者jsx。具體的Page.vue代碼如下：

<template>
  <RenderDataList :data="list" />
</template>

<script setup lang="tsx">
import ComponentA from "./component-a.vue";
import ComponentB from "./component-b.vue";
import ComponentC from "./component-c.vue";

const list = [1, 5, 3, 2, 1];

const RenderDataList = (props: { data: Array<number> }) => {
  return props.data?.map((val) => {
    if (val % 3 === 0) {
      return <ComponentA />;
    } else if (val % 3 === 1) {
      return <ComponentB />;
    } else {
      return <ComponentC />;
    }
  });
};
</script>

在上面這個例子中我們定義了一個RenderDataList，然后在template中可以直接將RenderDataList當(dāng)作一個組件使用。vscode也會給出智能提示。

在react中，這種場景我們可以將RenderDataList當(dāng)作一個函數(shù)去使用，然后在模版中直接調(diào)用這個函數(shù)就行了。但是在vue中，RenderDataList只能當(dāng)做一個組件使用，不能當(dāng)做函數(shù)調(diào)用。

還有一點(diǎn)需要避坑的是，假如我們的props中定義了一個駝峰命名法的變量，例如：pageNum。在template中傳入pageNum的時(shí)候必須寫成:pageNum="xxx"，不能寫成:page-num="xxx"。

總結(jié)

這篇文件介紹了如何在*.vue文件中直接使用JSX/TSX渲染函數(shù)，只需要導(dǎo)入@vitejs/plugin-vue-jsx，然后將script標(biāo)簽的lang設(shè)置為tsx或者jsx。就可以在script中直接定義組件，然后在template中直接使用組件就可以了。這樣我們既可以使用JSX/TSX渲染函數(shù)的靈活性，也可以使用vue模版語法中內(nèi)置的指令等功能。

如果我的文章對你有點(diǎn)幫助，歡迎關(guān)注公眾號：【歐陽碼農(nóng)】，文章在公眾號首發(fā)。你的支持就是我創(chuàng)作的最大動力，感謝感謝！

總結(jié)

以上是生活随笔為你收集整理的直接在*.vue文件（SFC）中使用JSX/TSX渲染函数，真香!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。