React中如何在return()外调用createPortal实现点击生成DOM？

我需要在点击按钮时，向一个已知id的已存在div中添加新内容。查阅React官方文档后得知，createPortal需在组件的return()中调用才能渲染内容，但我希望避免这种方式以降低代码复杂度、提升可读性。以下是我尝试的简化示例：

const spawnDiv = content => createPortal(content, document.getElementById("spawn-here"));

const handleClick = () => {
    if (conditionIsMet) {
        spawnDiv(<h1>I'm a spawned heading</h1>);
    }
};

但该代码无法正常运行，请问是否有可行的实现方案？

你不能直接在事件回调里调用createPortal渲染内容，因为React的渲染逻辑必须依赖组件状态或props变化驱动。要实现需求，最简洁的方式是用状态控制Portal的渲染，既不用在return里写复杂逻辑，也能保持代码清晰：

基础实现：单次添加内容 #

import { useState, createPortal } from 'react';

function YourComponent() {
  // 用状态存储要渲染的Portal内容，初始为null表示不渲染
  const [portalContent, setPortalContent] = useState(null);
  // 获取目标容器DOM节点
  const targetContainer = document.getElementById("spawn-here");

  const handleClick = () => {
    if (conditionIsMet) {
      // 更新状态，触发Portal渲染
      setPortalContent(<h1>I'm a spawned heading</h1>);
    }
  };

  return (
    <div>
      <button onClick={handleClick}>点击添加内容</button>
      {/* 用状态和容器存在性判断控制Portal渲染 */}
      {portalContent && targetContainer && createPortal(portalContent, targetContainer)}
    </div>
  );
}

进阶实现：支持多次追加内容 #

如果需要点击按钮多次添加不同内容，可以把状态改成数组，每次点击追加新内容：

import { useState, createPortal } from 'react';

function YourComponent() {
  const [portalContents, setPortalContents] = useState([]);
  const targetContainer = document.getElementById("spawn-here");

  const handleClick = () => {
    if (conditionIsMet) {
      // 追加新内容到数组，用长度做key避免重复警告
      setPortalContents(prev => [...prev, <h1 key={prev.length}>Heading {prev.length + 1}</h1>]);
    }
  };

  return (
    <div>
      <button onClick={handleClick}>点击添加内容</button>
      {targetContainer && createPortal(
        <div>{portalContents}</div>,
        targetContainer
      )}
    </div>
  );
}

原代码失效原因 #

createPortal本质是一个React元素，必须被纳入React的渲染树才能生效。直接在事件回调里调用它，并没有把它加入React的渲染流程，所以不会被挂载到DOM中。而通过状态驱动，React会在状态变化时重新渲染组件，这时Portal才会被正确处理并挂载到目标容器。

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