While migrating my vue application into react, i am facing this problem. Not able to understand how to approach this property into react.
In my vue icon component, there is a render function to define non-prop attributes. Now i am not sure how to address this properties in react render function.
Here is the vue icon component - render function
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));
},
While in that 'data' it returns {attrs: {...}} which consists of (attrs:{}, class: ..., domProps: ..., on: ..., style: ... ).
How to approach this in react? Any suggestion will be helpful as i am not that much familiar with react
In React every data passed from parent to child component is a prop (attributes, props, events, slots ...), the following example illustrates how to handle props in a component then to use them in 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>
);
}