直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!

这篇具有很好参考价值的文章主要介绍了直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在日常开发中vue的模版语法在大多数情况都能够满足我们的需求,但是在一些复杂的业务场景中使用模版语法就有些麻烦了。这个时候灵活的JSX/TSX渲染函数就能派上用场了,大多数同学的做法都是将*.vue文件改为*.tsx或者*.jsx文件。其实我们可以直接在*.vue文件中直接使用JSX/TSX渲染函数。

什么场景需要使用JSX/TSX渲染函数

假设我们现在有这样的业务场景,在我们的页面中有个list数组。我们需要去遍历这个数组,根据每一项的item去渲染不同的组件。如果tem的数据满足条件A,那么就渲染组件A。如果item的数据满足条件B,那么就渲染组件B。如果item的数据满足条件C,那么就渲染组件C。

如果我们使用vue模版语法去实现这个需求,我们的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>

这样虽然可以实现功能,但是明显不够优雅,领导code review时看了直呼摇头。

在*.jsx/tsx文件中使用JSX/TSX渲染函数

此时机智的小伙伴会说,我们可以使用vuesetup方法使用JSX/TSX渲染函数实现。确实可以,我们来看看具体实现的代码:

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中。这种写法有如下几个痛点:
由于没有使用vue的模版语法,所以vue内置的v-model等指令和项目中自己封装的指令等都不能使用了,只能使用js去自己实现。

按照常规的思维,setup直接返回一个值就行了,但是如果你这样写就会收到这样的报错:

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

原因是setup() 函数在每个组件中只会被调用一次,而返回的渲染函数将会被调用多次。这样就导致我们的代码只能在外面包裹一层匿名函数:

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

在*.vue文件中使用JSX/TSX渲染函数

那么有没有方法可以让我们在使用JSX/TSX渲染函数的同时,也可以在vue文件中使用模版语法呢?答案是:当然可以!

首先我们需要导入@vitejs/plugin-vue-jsx

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

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

然后我们需要将vue文件的script标签的lang设置为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当作一个组件使用。vscode也会给出智能提示。
直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!

react中,这种场景我们可以将RenderDataList当作一个函数去使用,然后在模版中直接调用这个函数就行了。但是在vue中,RenderDataList只能当做一个组件使用,不能当做函数调用。

还有一点需要避坑的是,假如我们的props中定义了一个驼峰命名法的变量,例如:pageNum。在template中传入pageNum的时候必须写成:pageNum="xxx",不能写成:page-num="xxx"

总结

这篇文件介绍了如何在*.vue文件中直接使用JSX/TSX渲染函数,只需要导入@vitejs/plugin-vue-jsx,然后将script标签的lang设置为tsx或者jsx。就可以在script中直接定义组件,然后在template中直接使用组件就可以了。这样我们既可以使用JSX/TSX渲染函数的灵活性,也可以使用vue模版语法中内置的指令等功能。

如果我的文章对你有点帮助,欢迎关注公众号:【欧阳码农】,文章在公众号首发。你的支持就是我创作的最大动力,感谢感谢!文章来源地址https://www.toymoban.com/news/detail-783762.html

到了这里,关于直接在*.vue文件(SFC)中使用JSX/TSX渲染函数,真香!的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的组合式API中如何使用setup()函数中的条件渲染和循环渲染

    首先,让我们来了解一下什么是Vue3的组合式API。组合式API是一种在Vue3中用于构建组件的方式,它使用函数式编程的方法来组织代码,让你的组件更加清晰、易于理解和维护。而setup()函数则是组合式API的核心,它用于初始化组件并返回包含组件数据的对象。 现在,让我们来看

    2024年02月11日
    浏览(52)
  • vue的h渲染函数和customRender在ant design vue的table组件的使用

    使用ant design vue 的table组件,没有使用插槽的情况下,我想你给我使用tooltip,这样子我就不用又写插槽又写html结构了 因为我们使用table组件,想自定义结构,一般是先使用插槽,然后插槽填写内容,比如下面做法 这个时候我们可以使用组件列表 columns 说明的 customRender 属性来简化这一

    2024年02月13日
    浏览(48)
  • react06-jsx渲染机制

    构建视图的具体流程 : 将jsx语法,编译为虚拟dom对象 ,根据react中的处理生成virtualDom ,这是react自己内部构建的一套对象体系,基于jsx中的属性描述构建成视图中真实DOM的相关描述,具体通过 React.createElement(type , props , children) 将虚拟dom构建成真实dom 补充: 第一次渲染是直接

    2024年04月28日
    浏览(26)
  • 纯前端使用Vue3上传文件到minio文件服务器,粘贴直接可用

    1、首先安装minio的插件,因为我使用的vue3,不支持模块化的导入,所以我们使用一个别人写好的vue2的包 2、在需要上传文件的页面导入这个包 3、创建一个minio的客户端 这里说明一下,accessKey、secretKey、sessionToken都是通过接口获取到的 临时凭证 4、 通过带预签名的url上传,首

    2024年04月11日
    浏览(43)
  • x-cmd pkg | tsx - Node.js 的直接替代品

    tsx 代表 “TypeScript execute”,由 TypeScript 编写,内部使用由 Go 语言编写的 esbuild 核心二进制实现超快的 TypeScript 编译,旨在增强 Node.js 以无缝运行 TypeScript / ESM / CJS module 编写的脚本文件,成为 node 命令的直接替代品。 使用 x env use tsx 即可自动下载并使用 在终端运行 eval \\\"$(

    2024年01月22日
    浏览(52)
  • jsx (vue3项目中使用)

    一、什么是jsx 在 JavaScript 里面写 HTML 的语法,就叫做 JSX,算是对 JavaScript 语法的一个扩展. (在vue3项目中相当于单文件组件,.vue)使用的是jsx语法 二、jsx语法 1.插值。与 vue 模板语法中的插值一样,但是双大括号 {{}} 变为了单大括号 {}。大括号内支持任何有效的 JavaScript 表

    2024年01月17日
    浏览(42)
  • Vue3 项目中怎么使用 jsx——易懂

    在 vue3 项目中使用JSX( JavaScript XML )可以让你更灵活地创建组件和视图。接下来给大家讲解一下vue3项目中怎么使用 jsx 步骤 1: 创建一个Vue 3 项目 如果你还没有Vue 3项目,可以使用Vue CLI来创建一个。 在创建项目时,确保选择Vue 3选项。接下来,进入项目目录并启动开发服务器

    2024年02月06日
    浏览(38)
  • 在Vue2和Vue3中JSX的使用集锦

    有时候,我们使用渲染函数(render function)来抽象组件,而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大,体验不佳,这个时候就派 JSX 上场了。然而在Vue3中默认是带了JSX支持的,而在 Vue2 中使用 JSX,需要安装并使用 Babel 插件: @vue/babel-preset-jsx @vue/babel-hel

    2024年02月09日
    浏览(43)
  • Vue渲染函数渲染html

    版本 vue2.6 使用 domProps属性 官方文档

    2024年02月05日
    浏览(50)
  • React【React是什么?、创建项目 、React组件化、 JSX语法、条件渲染、列表渲染、事件处理】(一)

           React是什么? 为什么要学习React  React开发前准备  创建React项目 

    2024年02月11日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包