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

Question

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

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

我想在main目录中显示模式，这样我就可以在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"));
}