如何将HTMLElement转换为React元素并作为子元素正常渲染

React的渲染逻辑只接受React元素作为合法子节点，直接传入原生HTMLElement不会被识别渲染。你之前用dangerouslySetInnerHTML的方案不仅存在XSS安全风险，还会丢失原生DOM上绑定的事件、自定义属性、第三方库实例关联的内容，仅适合静态无交互的HTML片段渲染。

正确的实现方式是通过ref绑定React提供的容器元素，在组件挂载完成后用原生DOM API把生成的HTMLElement插入容器中：

函数组件实现 #

import { useRef, useEffect } from 'react';

function NativeDomContainer() {
  // 绑定插入原生DOM的容器节点
  const containerRef = useRef(null);

  useEffect(() => {
    // 这里可以替换为第三方库返回的原生HTMLElement
    const sub = document.createElement('p');
    sub.innerText = 'Not React';
    // 原生DOM事件也可以正常绑定，不会丢失
    sub.addEventListener('click', () => alert('原生DOM点击事件触发'));

    if (containerRef.current) {
      containerRef.current.appendChild(sub);
    }

    // 组件卸载时清理DOM，避免内存泄漏
    return () => {
      if (containerRef.current) {
        containerRef.current.innerHTML = '';
        // 如果第三方库提供了实例销毁方法，也可以在这里调用
      }
    };
  }, []);

  return <div ref={containerRef} />;
}

类组件实现 #

import React from 'react';

class NativeDomContainer extends React.Component {
  constructor(props) {
    super(props);
    this.containerRef = React.createRef();
  }

  componentDidMount() {
    const sub = document.createElement('p');
    sub.innerText = 'Not React';
    this.containerRef.current.appendChild(sub);
  }

  componentWillUnmount() {
    this.containerRef.current.innerHTML = '';
  }

  render() {
    return <div ref={this.containerRef} />;
  }
}

方案优势 #

• 无安全风险：所有DOM操作都通过原生API执行，不会解析任意HTML字符串，规避XSS隐患
• 特性完整保留：原生DOM上绑定的事件、自定义属性、第三方库关联的实例都不会丢失
• 易维护：可以根据业务需求在useEffect的依赖数组中添加变量，实现原生DOM的更新逻辑，卸载时的清理逻辑可以避免内存泄漏

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