内容简介:打算用React写对话框已经很长一段时间,现在是时候兑现承诺了。实际上,写起来相当简单。核心在于使用React的接口
打算用React写对话框已经很长一段时间,现在是时候兑现承诺了。实际上,写起来相当简单。
核心在于使用React的接口 React.createPortal(element, domContainer)
。该接口将 element
渲染后的DOM节点嵌入 domContainer
(通常是 document.body
),并保证只嵌入一次。
所以,我们可以这样写一个对话框或模态框:
function Dialog() { return React.createPortal( <div>Dialog contents</div>, document.body ) }
一个新的 div
会出现在 body
内部:
一个完整DEMO:
class Modal extends React.Component { render() { const { visible, onClose } = this.props return visible && ReactDOM.createPortal(<StyledModalRoot> <div className="box"> Content <br/> <button onClick={onClose}>Close</button> </div> </StyledModalRoot>, document.body) } } class App extends React.Component { state = { visibleModal: false } showModal = () => this.setState( { visibleModal: true } ) handleCloseModal = () => this.setState( { visibleModal: false } ) render() { const { visibleModal } = this.state return <div style={{padding: '20px'}}> <button onClick={ this.showModal }>Show Modal</button> <Modal visible={visibleModal} onClose={ this.handleCloseModal } /> </div> } } const StyledModalRoot = styled.div` position: fixed; z-index: 1001; left: 0; top: 0; display: grid; place-items: center; width: 100%; height: 100%; background: rgba( 0, 0, 0, 0.2 ); >.box { position: relative; display: grid; place-items: center; width: 80%; height: 80%; background: white; border-radius: 10px; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 5px 8px 0px rgba(0,0,0,0.14), 0px 1px 14px 0px rgba(0,0,0,0.12); } `
是不是很简单?
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 如何使用JavaScript构建模态框插件
- 自定义带动画效果的模态框
- Angluar-模态视图构建简析(A)
- React 30 秒速学:制作模态框组件
- BERT在多模态领域中的应用
- 通用的图像-文本语言表征学习:多模态预训练模型 UNITER
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
啊哈C!思考快你一步
啊哈磊 / 电子工业出版社 / 2013-9 / 39.00元
这是一本非常有趣的编程启蒙书,全书从中小学生的角度来讲述,没有生涩的内容,取而代之的是生动活泼的漫画和风趣幽默的文字。并配合超萌的编程软件,从开始学习与计算机对话到自己独立制作一个游戏,由浅入深地讲述编程的思维。同时,与计算机展开的逻辑较量一定会让你觉得很有意思。你可以在茶余饭后阅读本书,甚至蹲在马桶上时也可以看得津津有味。编程将会改变我们的思维,教会我们如何思考,让我们的思维插上计算机的翅膀,以......一起来看看 《啊哈C!思考快你一步》 这本书的介绍吧!