如何渲染并执行从API响应获取的React组件字符串？

我从API获取了字符串格式的React组件代码，需要在自身React应用中渲染该组件并保证其表单输入、按钮提交等功能正常运行。当前代码框架如下：

const [externalComponent, setExternalComponent] = useState('');

useEffect(() => {
    getCompnentData();
}, []);

const getCompnentData = (): void => {
    try {
        /* API调用逻辑 */
        setExternalComponent(response.data);
    } catch (exception) {
        console.log(exception);
    }
}

需要实现Parser函数，将获取到的组件字符串渲染到指定位置：

<div>{Parser(externalComponent)}</div>

API返回的字符串组件示例：

import React, { useState } from 'react';

import { CardContainer, Button } from 'common/style';

const POC4 = () => {
 const [formData, setFormData] = useState({
    firstName: 'Jack',
    lastName: 'Li',
    Email: 'test.name@test.com'
 })

const handleUpdate = (e) => {
    const { name, value } = e.target;
    const tempFormData = {...formData};
    tempFormData[name] = value;
    setFormData(tempFormData);
}

const submitForm = () => {
    console.log(formData)
}

return (
        <CardContainer className='sm-12' style={{ width: '100%' }}>
            <div className="row">
                <div className="col-6">
                    <input type="text" name='firstName' className="form-control" value={formData.firstName} onChange={handleUpdate} />
                    <input type="text" name='lastName' className="form-control" value={formData.lastName} onChange={handleUpdate}/>
                    <input type="text" name='Email' className="form-control" value={formData.Email} onChange={handleUpdate}/>

                    <div className='mt-2'>
                        <Button
                            className="primary"
                            htmlType="submit"
                            loading={false}
                            onClick={submitForm}>
                            Submit
                        </Button>
                    </div>
                </div>
            </div>
        </CardContainer>
  )
}

export default POC4;

可行解决方案 #

方案1：使用@babel/standalone编译组件代码 #

通过Babel在浏览器端编译JSX代码，将字符串转换为可执行的React组件。

1. 安装依赖

npm install @babel/standalone

2. 实现Parser函数

import React, { useEffect, useState } from 'react';
import * as Babel from '@babel/standalone';
// 导入本地依赖的自定义组件
import { CardContainer, Button } from 'common/style';

const Parser = (componentString) => {
  const [Component, setComponent] = useState(null);

  useEffect(() => {
    if (!componentString) return;

    try {
      // 移除import语句，后续手动注入依赖
      const processedCode = componentString
        .replace("import React, { useState } from 'react';", "")
        .replace("import { CardContainer, Button } from 'common/style';", "");

      // 编译JSX代码
      const { code } = Babel.transform(processedCode, {
        presets: ['react'],
      });

      // 创建执行上下文，注入所需依赖
      const context = {
        React,
        useState: React.useState,
        CardContainer,
        Button,
        module: {}
      };

      // 执行编译后的代码
      eval(code);
      // 获取导出的组件
      setComponent(context.module.default || context.POC4);
    } catch (err) {
      console.error('组件编译失败:', err);
    }
  }, [componentString]);

  return Component ? <Component /> : null;
};

方案2：使用react-jsx-parser库 #

该库专门用于解析JSX字符串，支持自定义组件和hooks的映射。

1. 安装依赖

npm install react-jsx-parser

2. 提取并渲染JSX内容

import { JSXParser } from 'react-jsx-parser';
import { CardContainer, Button } from 'common/style';

// 从组件字符串中提取return后的JSX部分
const extractJSX = (componentString) => {
  const returnMatch = componentString.match(/return\s*\(([\s\S]*)\)/);
  return returnMatch ? returnMatch[1] : '';
};

// 渲染组件
<div>
  {externalComponent && (
    <JSXParser
      jsx={extractJSX(externalComponent)}
      // 映射自定义组件
      components={{ CardContainer, Button }}
      // 注入hooks
      bindings={{ useState: React.useState }}
    />
  )}
</div>

关键注意事项 #

• 安全风险：动态执行字符串代码存在XSS攻击风险，必须确保API来源完全可信，禁止渲染未知或不可信来源的代码。
• 依赖匹配：API返回组件中引用的自定义组件（如CardContainer、Button）必须在当前应用中存在，否则需提前处理依赖映射。
• 性能优化：浏览器端编译代码会有性能开销，若频繁渲染建议在服务端预编译组件代码后再返回。

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