本篇内容主要讲解“React如何创建对话框组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“React如何创建对话框组件”吧!
原生的前端体系创建一个对话框可是再简单不过了。但是如果放到组件化思想下的react体系中,想要制作一个属于自己的对话框还是有一定的麻烦的。主要遇到的问题有两个:一是如何在子组件中创建body下的对话框组件,二是如何删除这个组件。
接下来我们就一步一步解决这两个问题。
我们先写好dialog组件:(所有的样式都不写了,这里实现一个原型)
class Dialog extends Component{ constructor(props){ super(props); } render(){ return( <div className="dialog"> <div className="title">{this.props.title}</div> <div className="content">{this.props.children}</div> <div className="button-area"> <a onClick={this.props.onClickCancle.bind(this)} className="btns">取消</a>//这里接收父组件传递过来的关闭对话框的方法 <a className="btns btns-blue">确定</a> </div> </div> ) }}
动态创建组件到body中,react为我们提供了一个方法:ReactDOM.unstable_renderSubtreeIntoContainer(parent,component,dom),parent一般是this,组件就是对话框组件,dom就是要插入的dom节点。
根据这个方法,我们就可以为对话框写一个父组件,用于全屏居中显示:
class DialogCenter extends Component{ constructor(props){ super(props); } appendToBody() { ReactDOM.unstable_renderSubtreeIntoContainer( this, <Dialog title="this is a title!" onClickCancle={this.props.onClickCancle.bind(this)}> <span>这是内容内容内容</span> </Dialog>, this.container ) } componentDidMount() { this.container = document.createElement('div'); $(this.container).addClass("global-hide"); document.body.appendChild(this.container); this.appendToBody() } componentDidUpdate() { this.appendToBody() } componentWillUnmount() { document.body.removeChild(this.container) } render(){ return null; }}
这样我们就解决了第一个问题,那么接下来我们要怎样调用这个组件呢?
下面是调用对话框的父组件
//启动对话框,选择职业,开始考试class BeginExamComponent extends Component{ constructor(props){ super(props); } //使用函数在render中动态创建组件 renderDialog(){ if (this.props.isShow){ console.log("开始创建对话框组件"); return(//将关闭对话框的方法传递下去 <DialogCenter onClickCancle={this.props.onButtonClose.bind(this)}/> ) }else{ return null;//这里实际上就是所谓的删除组件 } } render(){ return( <div className="begin-exam-area"> <div className="top-tips">点击按钮,请确认信息后开始考试</div> <div className="button-wrapper"> <button onClick={this.props.onButtonClick.bind(this)}>开始考试</button>//启动对话框的函数 <button>模拟考试</button> </div> {this.renderDialog()} </div> ) }}
这里我们可以看到,我们使用了一个renderDialog函数在render中动态创建对话框组件,之所以可以这样直接写进去,主要是我们之前的DialogCenter组件实现了ReactDOM.unstable_renderSubtreeIntoContainer方法,因此这个组件将会直接在body直接子节点中渲染。
export class Home extends Component{ constructor(){ super(); this.state={ showDialog:false } } showDialog(){ console.log("调用对话框"); this.setState({ showDialog:true }) } closeDialog(){ console.log("卸载对话框"); this.setState({ showDialog:false }) } render(){ return( <div> <HomeHeader avatarUid={this.props.account}/> <SearchArea/> <BeginExamComponent onButtonClick={this.showDialog.bind(this)} onButtonClose={this.closeDialog.bind(this)} isShow={this.state.showDialog}/> </div> ) }}
到此,相信大家对“React如何创建对话框组件”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!