React如何实现无需在JSX中声明、可通过函数调用触发的组件？

React的渲染逻辑要求所有组件必须纳入React的渲染树才能被正常管理，你要的「无需提前嵌入组件标签」的效果可以通过两种方案实现，分别适配不同场景：

方案1：自定义Hook + Portal（推荐，符合React Hooks规则，支持状态联动） #

核心是通过createPortal把组件内容挂载到全局body下的独立容器，使用者只需要加一行无副作用的占位标签即可，完全不用关心组件内部逻辑。

完整实现代码 #

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

export const useComponent = (defaultProps = {}) => {
  const [visible, setVisible] = useState(false)
  // 动态创建全局挂载容器，不会侵入使用者的DOM结构
  const mountContainer = useMemo(() => {
    const div = document.createElement('div')
    document.body.appendChild(div)
    return div
  }, [])

  // 对外暴露的显示方法，支持传入临时参数
  const show = useCallback((tempProps = {}) => {
    // 可在此处合并默认参数和临时参数传给组件
    setVisible(true)
  }, [])

  // 对外暴露的隐藏方法
  const hide = useCallback(() => {
    setVisible(false)
  }, [])

  // 组件卸载时自动销毁容器，避免内存泄漏
  useEffect(() => {
    return () => {
      document.body.removeChild(mountContainer)
    }
  }, [mountContainer])

  // 通过Portal渲染组件内容，对使用者的DOM结构无影响
  const ComponentPortal = visible ? createPortal(
    <div className={visible ? 'show' : 'hide'}>
      Component 
      <button onClick={hide}>Hide</button>
    </div>,
    mountContainer
  ) : null

  return [show, hide, ComponentPortal]
}

使用方式 #

// 调用Hook获取控制方法和占位组件
const [showComponent, _, ComponentPortal] = useComponent()

return (
  <div>
    {/* 直接调用方法即可显示组件 */}
    <button onClick={() => showComponent()}>Show Component</button>
    {/* 仅需放一次占位标签，无需传任何参数 */}
    <ComponentPortal />
  </div>
)

方案2：纯函数调用（零侵入，完全不需要嵌入JSX） #

如果不需要和调用方的组件状态联动，你可以封装成纯工具函数，调用时才动态创建渲染实例，完全不需要提前声明任何内容，使用成本最低。

完整实现代码 #

import { createRoot } from 'react-dom/client'

export const showComponent = (props = {}) => {
  // 动态创建挂载容器
  const mountContainer = document.createElement('div')
  document.body.appendChild(mountContainer)
  const root = createRoot(mountContainer)

  // 销毁逻辑
  const hide = () => {
    root.unmount()
    document.body.removeChild(mountContainer)
  }

  // 直接渲染组件
  root.render(
    <div className="show">
      Component 
      <button onClick={hide}>Hide</button>
    </div>
  )

  return hide
}

使用方式 #

// 任何地方直接调用即可显示组件，无需提前做任何声明
<button onClick={() => showComponent()}>Show Component</button>

注意事项 #

你之前的示例代码里有个常见写法错误：onClick={onShow(hide)}会在组件渲染时直接执行函数，正确的写法是onClick={() => onShow('hide')}。

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