0

鉴于这样的事情：

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 节点。但是，如上所示，这在点击处理程序内没有任何影响 - 它旨在从<MyPage/>组件返回，并在其他地方处理实际呈现。

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

4

1 回答 1

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>
  )
}
于 2021-09-25T08:11:01.603 回答