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

Question

我正在尝试将模式弹出窗口创建到特定的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>

Answer 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>
);

Answer 2

问题不是很清楚。但是，如果您的意思是我们如何在'root'元素之外的反应中渲染模态视图，则可以通过在组件内创建一个空节点来实现，该空节点将充当包装器

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，您可以检查