Al migrar mi aplicación vue a reaccionar, me enfrento a este problema. No puedo entender cómo abordar esta propiedad para reaccionar.
En mi componente de icono de vue, hay una función de representación para definir atributos que no son accesorios. Ahora no estoy seguro de cómo abordar estas propiedades en la función de procesamiento de reacción.
Aquí está el componente del icono vue - función de renderizado
render(h, { props, data, listeners, children = [] }) { // other code....... let iconName = props.icon || children.pop().text; let options = { class: [ "my-icon", cType && "my-icon--" + cType, cColor && "my-icon--" + cColor, cSize && "my-icon--" + cSize, props.spacing && "my-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); } console.log(data); return h("i", Object.assign(data, options)); },Mientras que en esos 'datos' devuelve {attrs: {...}} que consiste en (attrs:{}, class: ..., domProps: ..., on: ..., style: ... ) .
¿Cómo abordar esto en reaccionar? Cualquier sugerencia será útil ya que no estoy muy familiarizado con reaccionar
En React, todos los datos que se pasan del componente principal al secundario son un accesorio (atributos, accesorios, eventos, espacios...), el siguiente ejemplo ilustra cómo manejar los accesorios en un componente y luego usarlos en JSX:
import React from 'react'; export default function Icon(props) { let iconName = props.icon || props.children.pop().text; let options ={ className:`my-icon ${props.spacing && "my-icon--spacing"}`, style:{fontSize:'14px'}, ...props // spread the other props like event listeners } return ( <i {...options}>{iconName}</i> ); }