能否在React的onClick处理函数中使用createPortal渲染组件到指定节点？

完全可以在事件回调中触发带上下文的组件渲染到指定DOM节点，核心思路是把动态Portal的渲染托管到当前组件的正常渲染链路中，而非直接在事件回调里执行渲染逻辑。

具体实现步骤 #

1. 在当前组件内用状态维护需要渲染的动态Portal配置列表，每个配置包含唯一标识、要渲染的组件实例、目标DOM节点三个核心信息
2. 事件触发时仅修改状态，新增对应的Portal配置，触发组件重渲染
3. 在组件的返回值中遍历配置列表，统一调用createPortal生成对应的Portal节点，这些Portal属于当前组件的渲染输出，自然继承上层所有Context
4. 组件卸载时只需从状态中移除对应配置，React会自动处理Portal组件的销毁逻辑

代码示例 #

import { useState, useCallback } from 'react'
import { createPortal } from "react-dom"

// 你的弹窗组件，内部useContext可以正常获取上层所有Context值
const MyModalDialog = ({ onClose }) => {
  return <div style={{
    position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
    padding: '20px', background: '#fff', border: '1px solid #ccc'
  }}>
    弹窗内容
    <button onClick={onClose}>关闭</button>
  </div>
}

const MyPage = () => {
  // 存储所有待渲染的动态Portal配置
  const [portalList, setPortalList] = useState([])

  // 点击触发弹窗
  const openModal = useCallback(() => {
    const portalId = Date.now()
    setPortalList(prev => [
      ...prev,
      {
        id: portalId,
        element: <MyModalDialog onClose={() => closeModal(portalId)} />,
        container: document.body
      }
    ])
  }, [])

  // 关闭弹窗
  const closeModal = useCallback((targetId) => {
    setPortalList(prev => prev.filter(item => item.id !== targetId))
  }, [])

  return (
    <div>
      <button onClick={openModal}>点击打开弹窗</button>
      {/* 统一渲染所有动态Portal */}
      {portalList.map(({ id, element, container }) => 
        createPortal(element, container, String(id))
      )}
    </div>
  )
}

方案优势 #

• 所有动态渲染的组件都在React的组件树链路中，完整继承上层Context，useContext等依赖上下文的Hook都可以正常使用
• 不需要手动调用react-dom.render，组件的生命周期完全由React管控，不会出现内存泄漏问题
• 支持同时渲染多个动态组件，每个组件可以自定义目标渲染节点，不局限于body

如果需要跨任意组件调用动态渲染能力，可以把Portal的状态提到全局Context Provider中，所有子组件都可以调用暴露的方法新增/移除Portal，实现全局的动态弹窗、提示框等能力，上下文继承逻辑完全不变。

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