TypeError dans la fonction de rendu de Vue 3 : impossible de lire la propriété non définie (lire 'iconType')

Question

Je migre mon application vue de vue 2 vers vue 3. Cette erreur se produit lors de la suppression de l'option (function : true) d'un composant fonctionnel. Dans mon application vue 2, j'utilise les fonctions de rendu en passant des accessoires, des données et des écouteurs comme paramètres. Maintenant, j'ai lu la documentation officielle mais je n'arrive pas à comprendre comment transmettre des paramètres ? C'est ma fonction de rendu 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));
},

Comment le migrer vers la fonction de rendu vue 3 ou devez-vous utiliser la fonction de paramètres ? Si j'utilise la fonction de configuration, comment puis-je transmettre les données et l'écouteur en tant que paramètres ?

Answer 1

h 函数应该从 vue Importez, au lieu de l'utiliser comme paramètre, je recommande d'utiliser une fonction de rendu avec un hook de paramètres comme celui-ci :

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