Javascript 将React组件字符串转换为JSX

我有一系列的反应成分

//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"}/>`

//X.jsx
导入“/x.css”
常数X=（{X}）=>{X}
//Y.jsx
导入“/y.css”
常数Y=（{Y}）=>{Y}
` `

---

我想把它转换成jsx怎么做？

我想你提供的例子会把CSS声明注入到类名中，不是吗？这似乎不是你想要的。将css作为模块导入到给定组件中，并从文件中将相关类名添加到该组件中。

这是否回答了您的问题？这听起来像是个XY问题。为什么有一串组件？但为什么要从一串开始？您已经声明了一些组件，是什么情况导致您需要使用字符串来使用它们？@Squanchy您的意思是此字符串是用户输入（来自文本区域），您想将其显示回给他们？也给其他用户？请注意，JSX基本上是JS代码，您必须对其进行传输和评估。@Squanchy默认答案是不，这不对<代码>评估是危险的，而字符串代码是错误的。但是，如果你不告诉我们更多关于你正在努力实现的目标，我们就不能提供更多的建议。