TypeError dans la fonction de rendu de Vue 3 : impossible de lire la propriété non définie (lire 'iconType')
P粉585541766
P粉585541766 2024-02-26 12:10:31
0
1
390

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 ?

P粉585541766
P粉585541766

répondre à tous(1)
P粉792673958

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


Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal