如何将 React 模式附加到特定的 div？

Question

我正在使用 react-bootstrap 和 Modal 组件，我想在特定的 div 中附加一个 Modal。假设我有这样的结构：

<div className="container-fluid">
  <div className="main">
    {children}
    <Footer />
  </div>
</div>

我想在 main div 中显示模式，所以在 container-fluid 的左侧我可以看到导航栏。所以在 Modal 组件中我有：

import { useIntl } from "gatsby-plugin-intl"
import React, { useEffect, useContext } from "react"
import { Row, Modal, Button, Form, Col } from "react-bootstrap"
import BGTContext from "../../context/bgt/bgtContext"
import Localization from "../../helpers/localization"

export default function SectionModal({ show, onClose, section }) {
    const intl = useIntl()
  
    if (document.querySelector(".modal-backdrop") !== null)
      document.querySelector(".modal-backdrop").appendTo(".main")
      
  return (
    <Modal
      show={show}
      onHide={onClose}
      backdrop="static"
      keyboard={false}
      className="bgt-modal-fullscreen"
    >
      <Modal.Header closeButton></Modal.Header>
      <Modal.Body>
        <p>hello world</p>
      </Modal.Body>
    </Modal>
  )
}

我遵循了 this 解决方案，但没有用。我做错了什么？

Answer 1

我认为您问题的最佳解决方案是 Portals。您可以轻松地执行以下操作：

import { useIntl } from "gatsby-plugin-intl"
import React, { useEffect, useContext } from "react"
import ReactDOM from 'react-dom'
import { Row, Modal, Button, Form, Col } from "react-bootstrap"
import BGTContext from "../../context/bgt/bgtContext"
import Localization from "../../helpers/localization"

export default function SectionModal({ show, onClose, section }) {
  const intl = useIntl()
      
  return ReactDOM.createPortal((
    <Modal
      show={show}
      onHide={onClose}
      backdrop="static"
      keyboard={false}
      className="bgt-modal-fullscreen"
    >
      <Modal.Header closeButton></Modal.Header>
      <Modal.Body>
        <p>hello world</p>
      </Modal.Body>
    </Modal>
  ), document.querySelector(".main"));
}

如何将 React 模式附加到特定的 div？

How to append a React modal to a specific div?

reactjs

react-bootstrap