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

时间:2019-06-17 09:30:03

标签: reactjs bootstrap-modal reactstrap

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

2 个答案:

答案 0 :(得分:0)

如果我理解是正确的,那么您会看到一个模式弹出窗口,但它显示在同一页面上,您可以在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>
);

答案 1 :(得分:0)

问题不是很清楚。但是,如果您的意思是我们如何在'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,您可以检查

react-modal-with-portal