如何创建React Portal向子组件注入自定义内容

架构老林

2026-8-27

问题原因

你的两种写法失效核心原因都是没有让createPortal生成的React元素进入React的渲染流程：

第一种回调ref写法：你在ref回调函数里直接调用createPortal，但这个调用返回的React元素没有被放到组件的返回JSX中，React根本不会处理它，自然不会渲染任何内容。
第二种useRef写法：useRef保存的值变更时不会触发组件重渲染，首次渲染时childRef.current是null，等Child组件挂载完成、ref被赋值后，Parent组件不会自动重跑渲染逻辑，renderTitle永远不会被执行。

可行实现方案

不需要修改Child组件源码，用「回调ref+state存储目标DOM节点」的方式即可实现，核心逻辑是：拿到目标DOM节点后通过state更新触发重渲染，把createPortal生成的元素放到组件的返回JSX中交给React处理。
示例代码：

import { useState, forwardRef, createPortal } from 'react';

const Parent = () => {
  // 用state存要挂载Portal的目标DOM，state更新会自动触发重渲染
  const [titleContainer, setTitleContainer] = useState(null);

  return (
    <>
      <Child
        ref={(el) => {
          if (!el) return;
          // 拿到Child根节点后查找.title元素，存入state
          const titleEl = el.querySelector('.title');
          if (titleEl !== titleContainer) {
            setTitleContainer(titleEl);
          }
        }}
      />
      {/* 目标DOM存在时渲染Portal，Portal元素必须放在返回的JSX中 */}
      {titleContainer && createPortal(
        <span style={{ color: 'red', fontWeight: 'bold' }}>自定义富文本标题</span>,
        titleContainer
      )}
    </>
  );
};

const Child = forwardRef((_, ref) => (
  <div ref={ref}>
    <h2 className="title"></h2>
    <p>Test content</p>
  </div>
));

注意事项

不要用useRef存储目标DOM节点：useRef的值变更不会触发组件重渲染，会导致Portal无法在DOM就绪后及时挂载
回调ref中更新state前要做等值判断：ref回调可能在组件生命周期内多次触发，跳过重复的state更新可以避免无限重渲染问题
createPortal的第一个参数支持所有合法React元素：你可以传入自定义组件、带样式的富文本结构、绑定了交互事件的元素，完全满足自定义标题的展示需求，不受Child组件title属性只支持纯文本的限制
该方案完全不需要修改Child组件源码：Child组件依然可以脱离Parent独立使用，不会侵入原有组件的逻辑
Portal不破坏React的原有逻辑：虽然DOM被渲染到Child内部的.title节点下，但事件冒泡、Context传递、状态关联都和元素写在Parent组件内的表现完全一致，不需要额外适配。

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