如何在同一return语句中渲染React.createPortal组件与常规组件

你的代码问题出在return语句使用了逗号运算符，逗号运算符会返回最后一个表达式的结果，所以实际上只有showComp2 && <Comp2/>会被作为组件的返回值渲染，而createPortal虽然执行了，但不符合React组件的返回规范（组件必须返回单个React节点、节点数组或Fragment）。

要同时渲染Portal组件和条件渲染的Comp2，你需要用React.Fragment（或其短语法<>）将两个元素包裹起来，确保返回一个合法的React根节点。同时建议增加目标节点存在性判断，避免空节点报错。

修正后的代码示例（TypeScript）：

import React from 'react';
import ReactDOM from 'react-dom';
import Comp1 from './Comp1';
import Comp2 from './Comp2';

const ParentComponent = () => {
  const menuNode = document.getElementById("divMenuElement");
  const showComp2: boolean = true;

  return (
    <>
      {/* 确保目标节点存在时才创建Portal */}
      {menuNode && ReactDOM.createPortal(<Comp1 />, menuNode)}
      {/* 条件渲染Comp2 */}
      {showComp2 && <Comp2 />}
    </>
  );
};

export default ParentComponent;

关键说明： #

• <>是React.Fragment的简写，用于包裹多个子元素而不生成额外的DOM节点。
• 增加menuNode &&判断，防止当页面中不存在divMenuElement时，调用createPortal抛出错误。
• 现在Comp1会通过Portal渲染到指定的divMenuElement中，Comp2则按常规方式渲染在当前组件的DOM位置，且受showComp2条件控制。

如果不想用Fragment，也可以返回一个带key的元素数组：

return [
  menuNode && ReactDOM.createPortal(<Comp1 key="comp-portal" />, menuNode),
  showComp2 && <Comp2 key="comp-normal" />
];

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