将 React 组件字符串转换为 JSX

Question

I have a string of React components.

//X.jsx
import "./x.css"
const X =({x}) =><div className={"x"} >{x}</div>

//Y.jsx
import "./y.css"
const Y =({y}) =><div className={"y"} >{y}</div>

`<X x={"x"}/> <Y x={"y"}/>`

I want to convert it to jsx how to do it?

Answer 1

I think the example you provided would inject the CSS declarations into the classname, no? That doesn't seem like what you want. Maybe consult this page and explore an avenue where you are importing the css in as a module to the given component and adding the relevant classname to it from the file.