如何动态注入含React组件的HTML并渲染该组件？

首先明确：dangerouslySetInnerHTML只能渲染原生HTML标签，不会解析其中的React组件，所以你导入的<Carousel>会被当作普通未知HTML标签处理，不会触发React组件的生命周期。要解决这个问题，有两种可行思路：

思路1：改用JSON配置（推荐，安全且易维护） #

不要让API返回HTML/JSX字符串，改成返回结构化的JSON数据，比如轮播项的配置列表。这样你可以直接在组件中使用导入的Carousel组件渲染数据。

修改后的API响应示例 #

{
  "carouselItems": [
    {
      "imgSrc": "your-image-url-1",
      "legend": "Legend 1"
    },
    {
      "imgSrc": "your-image-url-2",
      "legend": "Legend 2"
    }
  ]
}

组件代码修改 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import Carousel from 'your-carousel-package'; // 确保已正确导入

const YourComponent = () => {
  const [carouselItems, setCarouselItems] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:9001/getContent')
      .then(response => {
        setCarouselItems(response.data.carouselItems);
      });
  }, []);

  return (
    <div className="content">
      <Carousel>
        {carouselItems.map((item, index) => (
          <div key={index}>
            <img className='carousel-img' src={item.imgSrc} />
            <p className="legend">{item.legend}</p>
          </div>
        ))}
      </Carousel>
    </div>
  );
};

export default YourComponent;

思路2：客户端编译JSX（仅在必须用HTML/JSX字符串时使用） #

如果API必须返回JSX字符串，你可以使用@babel/standalone在客户端编译并渲染这些JSX。注意这种方式存在性能损耗和XSS风险，仅在无法修改API时使用。

步骤1：安装依赖 #

npm install @babel/standalone

组件代码修改 #

import { useState, useEffect } from 'react';
import axios from 'axios';
import Carousel from 'your-carousel-package';
import * as Babel from '@babel/standalone';

const YourComponent = () => {
  const [renderedContent, setRenderedContent] = useState(null);

  useEffect(() => {
    axios.get('http://localhost:9001/getContent')
      .then(response => {
        // 提取Carousel内部的子元素代码，编译为React元素
        const carouselChildren = response.data.replace(/<Carousel>|<\/Carousel>/g, '').trim();
        const code = `
          React.createElement(Carousel, null, ${carouselChildren});
        `;
        try {
          const result = Babel.transform(code, {
            presets: ['react']
          }).code;
          // 执行编译后的代码，生成React元素
          const createElement = new Function('React', 'Carousel', result);
          const element = createElement(React, Carousel);
          setRenderedContent(element);
        } catch (err) {
          console.error('JSX编译失败:', err);
        }
      });
  }, []);

  return (
    <div className="content">
      {renderedContent}
    </div>
  );
};

export default YourComponent;

关键说明 #

• 思路1是最优解：完全规避XSS风险，React能正常管理组件生命周期，代码可维护性更高。
• 思路2需谨慎使用：客户端编译会增加页面加载时间，且如果API返回的内容不可信，会引入XSS攻击风险。

内容的提问来源于stack exchange，提问作者I'm nidhin