原生的前端体系创建一个对话框可是再简单不过了。但是如果放到组件化思想下的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>
)
}
}通过State控制组件的创建与否，就目前来看是创建对话框组件的核心。从这里可以实现很多有意思的东西，就看怎么去琢磨了。
总结
到此这篇关于React创建对话框组件的文章就介绍到这了,更多相关React创建对话框组件内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！