我正在将我的 vue 应用程序从 vue 2 迁移到 vue 3。从功能组件中删除 (function: true) 选项时出现此错误。在我的 vue 2 应用程序中，我通过传递 props、数据和侦听器作为参数来使用渲染函数。现在，我已经阅读了官方文档，但无法理解如何传递参数？这是我的 vue 2 渲染函数。
render(h, {props, data,listeners, children = []}) {
let moreIcons = {};
let cType = props.iconType || props.type;
if(!cType) {
cType = props.picto ? 'picto' : 'line';
}
if (cType === 'picto') {
moreIcons = moreIconsPicto;
} else if (cType === 'line') {
moreIcons = moreIconsLine;
}
let cColor ='';
if (props.primary||props.prim) { cColor= 'primary'; }
else if (props.point||props.pnt) { cColor= 'point'; }
else if (props.default||props.dft) { cColor= 'default'; }
else if (!!props.color||!!props.col) { cColor= props.color||props.col; }
let cSize = '' ;
if(props.large || props.lg) {cSize= 'large';}
else if(props.medium || props.md) {cSize= 'medium';}
else if(props.small || props.sm) {cSize= 'small';}
else if(props.xsmall || props.xs) {cSize= 'xsmall';}
else if(props.full) {cSize= 'full';}
let customSize = props.iconSize || props.size;
if(parseInt(customSize, 10)) {customSize = customSize + 'px';}
let iconName = props.icon || children.default().text;
let options = {
class: [
'ur-icon',
'ur-icon--'+cType,
cColor && 'ur-icon--'+cColor,
cSize &&'ur-icon--'+cSize,
props.spacing && 'ur-icon--spacing'
],
style: {
fontSize: customSize
},
on: listeners
};
if(data.class) {
if(Array.isArray(data.class)) {
options.class = options.class.concat(data.class);
}
if(typeof data.class === 'string' || typeof data.class === 'object') {
options.class.push(data.class);
}
}
if(data.style) {
options.style = Object.assign(data.style, options.style);
}
let child = [];
if (moreIcons[iconName] !== undefined) {
options.class.push('more-icon__'+iconName);
let svg = moreIcons[iconName];
if(!props.focusable) {svg = svg.replace('<svg ','<svg focusable="false" ');}
options.domProps={innerHTML:svg};
} else {
// 1. icon class
options.class.push('fa-'+iconName);
// 2. type class
if ( props.brand ) { options.class.push('fab'); }
else if( props.fab) { options.class.push('fab'); }
else if( props.regular ) { options.class.push('far'); }/* pro only */
else if( props.far ) { options.class.push('far'); }/* pro only */
else if( props.light) { options.class.push('fal'); }/* pro only */
else if( props.fal) { options.class.push('fal'); }/* pro only */
else if( props.old) { options.class.push('fa'); }/* font-awesome 4.0*/
else if( props.fa) { options.class.push('fa'); }/* font-awesome 4.0*/
else { options.class.push("fas"); }
}
return h('i',Object.assign(data, options));
},
如何将其迁移到vue 3渲染功能或需要使用设置功能？如果我使用设置函数，那么如何将数据和侦听器作为参数传递？
h函数应该从vue导入，而不是用作参数，我建议使用带有设置挂钩的渲染函数，如下所示：import { defineComponent, h } from "vue"; export default defineComponent({ props: { ... }, setup(props, { slots }) { let moreIcons = {}; let cType = props.iconType || props.type; ... .... return () => h('i',Object.assign(data, options)); }, });