React实现动态调用的弹框组件
更新时间：2022年08月25日 15:21:43 作者：qq_35757537
这篇文章主要为大家详细介绍了React实现动态调用的弹框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近在用react开发项目，遇到一个需求——开发一个弹框组件。在react中创建一个组件是很简单的，只需要使用class创建并引入就可以了，但是要做到可以用js调用这个组件而不是写在jsx结构里，那就需要用到ReactDOM.render这个方法了。
首先先来屡一下需求：
1、弹框里的可配置字段：标题文字，提示文字，确认和取消按钮的显示隐藏以及文字。
2、点击确认和取消按钮后，可以触发相应的事件。
3、是否为短提示，短提示的时候，确认和取消按钮隐藏，并且2s后消失。
接下来用两种方法创建一个弹框组件，并比较一下这两种的差异。
下面先来实现一个普通的写在jsx结构里的组件：
弹框组件：DialogAlert.js
import React, { Component } from 'react';
import './index.scss';
class DialogAlert extends Component {
constructor(props){
super(props);
this.state = {
alertStatus:false,
alertTitle:'提示', //标题
alertTip:'网络错误', //提示
cancelText:'取消',
confirmText:'确认',
isShortTip:false, //是否为短提示，短提示的情况下不显示'取消''确认'（且2s后消失），且优先级最高，其他配置无效
isShowCancel:true, //是否显示确认按钮
isShowConfirm:true, //是否显示确认按钮
cancelCallbackFn:function(){}, //取消 回调函数
confirmCallbackFn:function (){}//确认 回调函数
}
}
componentWillReceiveProps(nextProps) {
let options = nextProps.dialogOpt || {};
//如果是短提示
if(options.isShortTip){
options.isShowCancel = false;
options.isShowConfirm = false;
setTimeout(()=>{
this.close()
},2000)
}
this.setState({
...options
})
}
//取消
cancel = () => {
this.state.cancelCallbackFn();
this.close()
}
//确认
confirm = () => {
this.state.confirmCallbackFn();
this.close()
}
close = () => {
this.setState({
alertStatus:false
})
}
render(){
let opts = this.state;
return (
<div className="dialog-wrap" style={opts.alertStatus ? {display:'block'}:{display:'none'}}>
<div className="dialog-box">
<h6>{opts.alertTitle}</h6>
<p>{opts.alertTip}</p>
{!opts.isShowCancel && !opts.isShowConfirm ? null : (
<div>
{opts.isShowCancel ? (<span onClick={ () => this.cancel() }>{opts.cancelText}</span>) : null}
{opts.isShowConfirm ? (<span className="confirm" onClick={ () => this.confirm() }>{opts.confirmText}</span>) : null}
</div>
)}
</div>
</div>
)
}
}
export default DialogAlert;这里的数据更新用到了componentWillReceiveProps这个生命周期，当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取，这里调用更新状态是安全的，并不会触发额外的render调用。
调用页面index.js
在state中定义可配置字段的变量
import DialogAlert from '../../widget/DialogAlert/index';
//省略了组件的js
this.state = {
dialogOpt:{
alertStatus:false,
alertTip:'我是自定义的内容',
cancelText:'取消2',
confirmText:'确认2',
isShortTip:false,
isShowCancel:true, //是否显示确认按钮
isShowConfirm:true, //是否显示确认按钮
cancelCallbackFn:function(){
alert(0);
}, //取消 回调函数
confirmCallbackFn:function (){
alert(1);
}//确认 回调函数
},
//其他数据
};在jsx中埋好对应的组件结构
<div onClick={()=>(this.alertdialog())}>点击触发弹框</div>
<DialogAlert dialogOpt={this.state.dialogOpt}></DialogAlert>添加触发事件
alertdialog(){
let opts = {
alertStatus:true
}
let _dialogOpt = Object.assign(this.state.dialogOpt,opts)
this.setState({
dialogOpt:_dialogOpt
})
}这样就完成一个普通的弹框。总感觉这样写的一个组件弹框有点冗余，复用起来也比较麻烦——在state里配置所有自定义的变量，并改动jsx结构，还需要注意写入jsx结构时弹框的层级问题。
接下来我们来实现一种可动态调用的组件：
原理是创建一个div，并插入到body里面，用这个div当容器，使用render渲染组件，通过改变组件的state来控制组件的显示和隐藏。
弹框组件：DialogAlert.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
//调用方法
// DialogAlert.open({
// alertTitle:'提示2',
// alertTip:"页面加载失败，是否重新加载?",
// cancelText:'取消',
// confirmText:'重新加载',
// isShortTip:true,
// isShowCancel:true,
// isShowConfirm:true,
// cancelCallbackFn:function(){
// console.log('取消了')
// },
// confirmCallbackFn:function (){
// console.log("确认了...");
// }
// });
class DialogBox extends Component {
constructor(props){
super(props);
this.state = {
alertStatus: false, //是否显示提示框
alertTitle:'提示', //标题
alertTip:'网络错误', //提示
cancelText:'取消',
confirmText:'确认',
isShortTip:false, //是否为短提示，短提示的情况下不显示'取消''确认'（且2s后消失），且优先级最高，其他配置无效
isShowCancel:true, //是否显示确认按钮
isShowConfirm:true, //是否显示确认按钮
cancelCallbackFn:function(){}, //取消 回调函数
confirmCallbackFn:function (){}//确认 回调函数
}
}
//打开提示框
open = (options) => {
options = options || {};
//如果是短提示
if(options.isShortTip){
options.isShowCancel = false;
options.isShowConfirm = false;
setTimeout(()=>{
this.close()
},2000)
}
options.alertStatus = true;
this.setState({
...options
})
}
//取消
cancel = () => {
this.state.cancelCallbackFn();
this.close()
}
//确认
confirm = () => {
this.state.confirmCallbackFn();
this.close()
}
close = () => {
this.setState({
alertStatus:false
})
}
render(){
let opts = this.state;
return (
<div className="dialog-wrap" style={opts.alertStatus? {display:'block'}:{display:'none'}}>
<div className="dialog-box">
<h6>{opts.alertTitle}</h6>
<p>{opts.alertTip}</p>
{!opts.isShowCancel && !opts.isShowConfirm ? null : (
<div>
{opts.isShowCancel ? (<span onClick={ () => this.cancel() }>{opts.cancelText}</span>) : null}
{opts.isShowConfirm ? (<span className="confirm" onClick={ () => this.confirm() }>{opts.confirmText}</span>) : null}
</div>
)}
</div>
</div>
)
}
}
let div = document.createElement('div');
document.body.appendChild(div);
let DialogAlert = ReactDOM.render(<DialogBox /> ,div); //返回实例
export default DialogAlert;调用页面index.js
import DialogAlert from '../../widget/DialogAlert/index';
//省略了组件的js
DialogAlert.open({
alertTip:"加载失败，是否重新加载?",
confirmText:'重新加载',
cancelCallbackFn:()=>{
window.history.back();
},
confirmCallbackFn:()=>{
//todo...
}
})这里用到了ReactDOM.render，官方文档说这个方法目前会返回了对根组件实例的引用，所以我们可以调用到里面的open方法。但是官方文档中目前应该避免使用返回的引用，因为它是历史遗留下来的内容。为了以后的react更新迭代的兼容，我们可以省去动态插入组件的过程，改为写在jsx中，并设置ref，使用this.refs.xxx获取当前组件的实例，以便调用实例方法。
只需引入之后，直接调用就可以了。这样写的好处是解决了弹框的层级问题，也不用去改动jsx结构，其他页面复用起来更加方便快捷。
这两种方法在组件的定义上并没有很大的不同，只是在更新状态的时候有差异。第一种方法是在componentWillReceiveProps这个生命周期中监听父组件的值的变化再更新到state上，第二中方法是直接调用实例的open方法通过获取参数将值更新到state上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Zustand是一个为React和浏览器环境设计的轻量级状态管理库,由Vercel开发,它特点包括轻量级、易用性、灵活性、可组合性和性能优化,支持多种状态管理模式和中间件,适合中小型项目,Zustand还支持TypeScript,提供类型安全的支持2024-09-09
这篇文章主要介绍了React几种避免子组件无效刷新的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了React项目经验总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
Fiber 可以理解为一个执行单元，每次执行完一个执行单元，React Fiber就会检查还剩多少时间，如果没有时间则将控制权让出去，然后由浏览器执行渲染操作，这篇文章主要介绍了React Fiber架构原理剖析,需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了ahooks正式发布值得拥有的React Hooks工具库使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了 React Native 如何 获取不同屏幕的像素密度的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了简单介绍redux的中间件的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
在当前的Web开发中,使用React构建单页面应用（SPA）已经成为一种常见的做法,然而,当应用程序遇到错误时,有可能会导致整个页面崩溃,给用户带来不好的体验,本文将介绍如何在React单页面应用中捕获错误,以防止整个页面的崩溃,需要的朋友可以参考下2023-09-09
相信很多小伙伴们都一直在疑惑，setState 到底是同步还是异步。本文就详细的介绍一下React中setState同步或异步问题，感兴趣的可以了解一下2021-11-11
本篇文章主要介绍了react中fetch之cors跨域请求的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论