当前位置：首页 > news >正文

ts，js文件中使用 h函数渲染组件

news 2025/9/3 13:50:50

一、问题

二、解决方法

三、总结

一、问题

1. 新需求发现要复用之前的代码，所以重构抽离代码。但是发现原来的代码中涉及到组件渲染。

2.如何在ts，js文件中渲染组件呢?

二、解决方法

1.思路

使用h()+render函数来实现编程式渲染

2.遇到的问题

1) 渲染的组件使用到第三方库组件时，会报错 Failed to Resolve AModal,ARadio

原因：render渲染的组件和 App.vue渲染的组件不在同一个上下文，第三方库需要单独引入

解决方法：组件内部单独从 ant-design中引入

import { message, Modal, Radio, RadioGroup } from 'ant-design-vue'

2) 中英文显示：ant-design默认显示英文，如何显示中文呢？

解决方法：引入ConfigProvider并且设置 locale:zhCN

3.示例代码

  /*** h渲染组件* @param row 数据* @param visible 是否渲染组件*/const container = document.createElement('div')function renderComponent(row: Partial<GoodsData>, visible: boolean) {if (visible) {const dom = h(ConfigProvider,{// ant-design-vue 语言显示为中文locale: zhCN},h(DialogPintuanPriceAdjustment, {wholesaleId: row.wholesaleId,onSuccess: () => {openGroupEditPage('normal', row)},onClose: () => {renderComponent(row, false)}}))render(dom, container)} else {// 卸载组件render(null, container)}}

<template><!-- 组件DialogPintuanPriceAdjustment --><Modal centered title="" visible :width="500" :confirm-loading="loading" @cancel="emit('close')" @ok="submit"><div class="mb-2">该拼团活动是同步一口价自动上架的拼团，请问是否需要调整价格？</div><RadioGroup v-model:value="selected"><Radio :value="0">我要调整价格（系统将解除与一口价的关联关系）</Radio><Radio :value="1">不调价，仅修改其他内容（保持与一口价的供乐药价一致，系统定时同步刷新）</Radio></RadioGroup></Modal>
</template><script lang="ts" setup>
import { unBindAct } from '@/api/commodity-management/goodsOnShelves'
import { isNullOrUnDef } from '@/utils/is'
/*** 必须单独引入：否则会报错 Failed to resolve: Modal,Radio,RadioGroup* 因为h(),render渲染的组件和vue渲染的组件不在同一个上下文*/
import { message, Modal, Radio, RadioGroup } from 'ant-design-vue'
interface Props {wholesaleId: number
}const props = defineProps<Props>()const emit = defineEmits(['close', 'success'])const selected = ref<number | undefined>(undefined)const loading = ref(false)
async function submit() {if (isNullOrUnDef(unref(selected))) {message.warning('请先选择处理方式')return}if (unref(selected) === 0) {loading.value = truetry {await unBindAct({wholesaleId: props.wholesaleId})message.success('处理成功')emit('success')emit('close')} finally {loading.value = false}return}if (unref(selected) === 1) {emit('success')emit('close')return}
}
</script>