如何将React组件格式的字符串转换为可正常运行的JSX代码？

方案一：使用封装好的第三方库（最简实现） #

直接用react-jsx-parser库，该库已经封装了JSX编译、作用域绑定的逻辑，不需要手动处理编译流程：

import JsxParser from 'react-jsx-parser'
// 引入你自定义的X、Y组件
import X from './X'
import Y from './Y'

function App() {
  // 你的字符串形式JSX
  const jsxString = '<X x={"x"}/> <Y y={"y"}/>'
  return <JsxParser
    components={{ X, Y }} // 把需要用到的自定义组件传入
    jsx={jsxString}
  />
}

方案二：基于Babel手动实现（灵活可控） #

如果你不想引入额外的第三方库，可以用@babel/standalone在运行时编译JSX字符串：

• 首先安装依赖：npm install @babel/standalone
• 实现代码示例：

import React from 'react'
import ReactDOM from 'react-dom/client'
import { transform } from '@babel/standalone'
import X from './X'
import Y from './Y'

const jsxString = '<X x={"x"}/> <Y y={"y"}/>'
// 编译JSX字符串为可执行函数
const compiled = transform(`() => <>${jsxString}</>`, {
  presets: ['react']
}).code
// 绑定作用域，让执行时能识别React、X、Y变量
const RenderComponent = eval(compiled).bind({ React, X, Y })

// 正常渲染即可
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<RenderComponent />)

注意事项 #

• 运行时编译会有额外性能开销，固定内容的JSX建议提前在构建阶段编译好，不要放到运行时处理
• 如果JSX字符串来自用户输入，必须做好内容安全校验，避免XSS注入风险
• 字符串中用到的组件、变量必须提前传入作用域，否则会出现变量未定义的报错

内容的提问来源于stack exchange，提问作者Edgar