我正在尝试将模式弹出窗口创建到特定的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>
答案 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,您可以检查