React技术疑问：如何在HTMLElement ref中渲染组件？

可以实现，但不能用innerHTML这类直接操作DOM的方式——因为React元素是JS对象而非字符串，直接赋值会导致错误，更关键的是这种方式完全脱离React的渲染机制，组件的状态更新、生命周期都无法正常工作。

正确的做法是使用React官方提供的ReactDOM.createPortalAPI，它允许你将组件渲染到DOM树中的任意节点，同时保持组件在React的上下文和状态管理体系内。

示例实现 #

import React, { useRef, useState } from 'react';
import ReactDOM from 'react-dom';

// 自定义复杂组件示例
const ComplexCustomComponent: React.FC<{ onClose: () => void }> = ({ onClose }) => {
  return (
    <div style={{ padding: '20px', backgroundColor: '#f0f0f0' }}>
      <h2>我是复杂组件</h2>
      <button onClick={onClose}>关闭</button>
    </div>
  );
};

const DemoComponent: React.FunctionComponent = () => {
  const ref = React.useRef<HTMLElement>(null);
  const [showComponent, setShowComponent] = useState(false);

  return (
    <>
      <button onClick={() => setShowComponent(!showComponent)}>
        {showComponent ? '隐藏组件' : '渲染组件到指定节点'}
      </button>
      {/* 作为渲染目标的节点 */}
      <div ref={ref} style={{ marginTop: '10px', border: '1px solid #ccc', padding: '10px' }}></div>
      {/* 使用Portal将组件渲染到ref指向的节点 */}
      {showComponent && ref.current && ReactDOM.createPortal(
        <ComplexCustomComponent onClose={() => setShowComponent(false)} />,
        ref.current
      )}
      <div>页面其他元素和组件...</div>
    </>
  );
};

关键说明 #

• ReactDOM.createPortal接收两个参数：要渲染的React元素/组件，以及目标DOM节点（即ref的current值）
• Portal渲染的组件会被挂载到指定DOM节点中，但仍属于当前React组件的子节点，能正常接收props、响应状态变化，也能访问上下文
• 必须确保ref.current不为null时再渲染Portal，避免初次渲染时的空指针错误

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