TypeError：无法在渲染 function 中读取未定义的属性（读取“iconType”）-vue 3

Question

我正在将我的 vue 应用程序从 vue 2 迁移到 vue 3。从功能组件中删除 ( functional: true ) 选项时出现此错误。 在我的 vue 2 应用程序中，我通过传递道具、数据和侦听器作为参数来使用渲染 function。 现在，我已经浏览了官方文档，但无法理解如何传递参数？ 这是我的 vue 2 渲染 function。

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 渲染 function 或需要使用设置 function？ 如果我使用设置 function 那么我如何将数据和侦听器作为参数传递？

Answer 1

h function 应该从vue导入而不用作参数，我建议使用带有 setup hook 的渲染 function 如下：

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));
  },
});