在特定 div 中创建反应模式而不是渲染主体

Posted 2023-03-23

【中文标题】在特定 div 中创建反应模式而不是渲染主体

【英文标题】：Create react modal in specific div instead of rendering body

【发布时间】：2019-10-30 21:09:18

【问题描述】：

我正在尝试将模态弹出窗口创建到特定的 div 中，但它在底部创建到正文中

import  Modal  from 'react-bootstrap';
import  Button  from 'react-bootstrap';

<Modal show=this.state.show onHide=this.handleClose>
    <Modal.Header closeButton>
        <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
    <Modal.Footer>
        <Button variant="secondary" onClick=this.handleClose>
            Close </Button>
        <Button variant="primary" onClick=this.handleClose>
            Save Changes</Button>
    </Modal.Footer>
</Modal>

【问题讨论】：

请添加最少的代码，没有任何代码就很难分辨。

欢迎来到***！请在您的帖子中包含一个Minimal, Complete, and Verifiable Example (MCVE)，以证明您的问题。即：您尝试过什么？

Shubham 请检查代码，我已经更新了

【参考方案1】：

如果我理解是正确的，您有一个模式弹出窗口，但它显示在同一页面上，您可以在 return 语句中的特定 div 中编写代码。检查是否在组件中添加了 isOpen 并对其进行控制。希望这会有所帮助！

如下：

// rest of the code
return (
  <div>
    <div>
    //your page content 
    </div>
    <div>
      //Modal content 
      <Modal isOpen=this.state.modal toggle=this.toggle className=this.props.className>
      </Modal>
    </div>
  </div>
);

【参考方案2】：

这个问题不是很清楚。但是，如果您的意思是我们如何在“根”元素之外的反应中呈现模态视图，我们可以通过在组件内创建一个空节点来做到这一点，它将充当包装器

let node = null
const ModalWrapper = (props) =>
    useEffect(()=>
        node && ReactDOM.render(<Modal ...props />,node)
    )
    useEffect(()=>
        node = document.createElement('div')
        document.body.appendChild(node)
        ReactDOM.render(<Modal ...props />,node)
    ,[])
    return(
        <script />
    )

export default ModalWrapper

这是一个链接Create Modal with React Portal and React Hooks from scratch without external library，你可以查看