我可以从 onClick 处理程序创建门户吗？

Question

鉴于这样的事情：

import { render, createPortal } from "react-dom"

const MyPage = () => {
  const handler = () => {
    render(<MyModalDialog />, document.body)
  }

  return (
    <div>
      <button onClick={handler}>Click me</button>
    </div>
  )
}

我可以有条件地将我的模态对话框直接渲染到正文上（也许将清理留给对话框，但这对于这个问题并不重要）。这可行，但问题是没有可用的上下文（即useContext）。

从 v16 开始。这种情况有一个 api，createPortal。这样可以保留上下文并允许渲染到任意 DOM 节点。但是，如上所示，这在 click 处理程序中没有任何影响 - 它旨在从 <MyPage/> 组件返回，并在其他地方处理实际呈现。

所以我的问题是 - 我是否可以使用 createPortal 或其他 API 有条件地将任意组件渲染到指定的 DOM 节点作为事件处理程序的一部分？

Answer 1

更好的方法是将门户元素放在单独的组件中，并在 MyPage 组件中设置有条件地呈现模式的状态

类似

const MyPortaledModal = () => createPortal(<MyModalDialog />, document.body)


const MyPage = () => {
  const [shouldShowModal, setShouldShowModal] = useState(false);

  const toggleModal = () => setShowModal(prevValue => !prevValue)

  return (
    <div>
      <button onClick={toggleModal}>Click me</button>
      {shouldShowModal && <MyPortaledModal/>}
    </div>
  )
}