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

CodePudding user response：

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

DEMO