将 React 组件字符串转换为 JSX答案

【问题标题】：Convert React components String to JSX将 React 组件字符串转换为 JSX
【发布时间】：2021-08-24 02:10:32
【问题描述】：

我有一串 React 组件。

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

我想转成jsx怎么办？

【问题讨论】：

这能回答你的问题吗？ How do I convert a string to jsx?
这听起来像是一个 XY 问题。为什么会有一串组件？
但是为什么要以字符串开头呢？您已经声明了一些组件，什么情况导致您需要使用字符串来使用它们？
@Squanchy 你的意思是这个字符串是用户输入（来自文本区域），你想把它显示给他们？还给其他用户？请注意，JSX 基本上是 JS 代码，您必须对其进行转译和eval。
@Squanchy 默认答案是不，这是不对的。 eval 很危险，代码字符串很糟糕。但是，如果您不告诉我们更多关于您想要实现的目标，我们将无法提供更多建议。

标签： javascript reactjs string

【解决方案1】：

我认为您提供的示例会将 CSS 声明注入到类名中，不是吗？这似乎不是你想要的。 Maybe consult this page and explore an avenue 您将 css 作为模块导入给定组件并从文件中添加相关的类名。

【讨论】：