react插件？
2026-10-25 22:44:48
此插件可以满足缓存上一页的功能，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。
搭配react-router工作的、带缓存功能的路由组件，类似于Vue中的keep-alive功能。
Route中配置的组件在路径不匹配时会被卸载（render方法中returnnull），对应的真实节点也将从dom树中删除，利用Route暴露的children方法，让我们手动控制渲染。
注意：作者测试使用时版本为1.4.6
缓存语句不要写在Switch组件当中，因为Switch组件会卸载掉所有非匹配状态下的路由，需使用CacheSwitch替代Switch。
使用when属性决定何时使用缓存功能，可选值为[forward,back,always]，默认值为forward。
使用className属性给包裹组件添加自定义样式。
也可以使用behavior属性来自定义缓存状态下组件的隐藏方式，工作方式是根据CacheRoute当前的缓存状态，返回一个作用于包裹组件的props。
使用CacheRoute的组件将会得到一个名为cacheLifecycles的属性，里面包含两个额外生命周期的注入函数didCache和didRecover，分别用在组件被缓存和被恢复时
github地址
react插件可以写js代码不用写类型使用插件react-load-script
如果没有安装可以使用
yarnaddreact-load-script
或者
npminstallreact-load-script
，看你使用哪个包管理工具。
然后你就可以像使用React组件那样插入JS，如下代码。
importReactfrom'react';
importScriptfrom'react-load-script';
classDynamicScriptExampleextendsReact.Component{
constructor(props){
super(props);
this.state={
scriptStatus:'no'
}
}
handleScriptCreate(){
this.setState({scriptLoaded:false})
}
handleScriptError(){
this.setState({scriptError:true})
}
handleScriptLoad(){
this.setState({scriptLoaded:true,scriptStatus:'yes'})
}
render(){
return(
Script
url=""
onCreate={this.handleScriptCreate.bind(this)}
onError={this.handleScriptError.bind(this)}
onLoad={this.handleScriptLoad.bind(this)}
/
div动态脚本引入状态：{this.state.scriptStatus}/div
/
);
}
}
exportdefaultDynamicScriptExample;
react中使用G2插件实现折线图
效果图
1、引入
2、?componentDidMount函数中获取数据并渲染
componentDidMount(){
??letparams={};
??api.getMeetingDurationChart(params).then(res={
???if(res.responseObject){
????for(letindexinres.responseObject.charts){
?????varitem=res.responseObject.charts[index];
?????item.value=totalTime(item.value);
????}
????this.setState({
?????data:res.responseObject
????});
????//折线部分
????constchart=newG2.Chart({
?????container:'charts',
?????height:60,
?????forceFit:true,
?????padding:'auto'
????});
????chart.scale('value',{
?????min:0
????});
????chart.scale('time',{
?????range:[0,1]
????});
????chart
?????.area()
?????.color('#AFDEFF')
?????.position('time*value')
?????.shape('smooth');
????chart.tooltip({
?????offset:2,
?????title:null,
?????custom:true,
?????inPlot:false,
?????customFollow:true,
?????showTitle:false,
?????crosshairs:false,//垂直标准线
?????useHtml:true,
?????htmlContent:(title,items)={
??????return(
???????'divclass="tooltip-custom"pspanclass="point"/span'+
???????title+
???????'/pp'+
???????items[0].value+
???????'/p/div'
??????);
?????}
????});
????chart
?????.line()
?????.color('#199FFF')
?????.position('time*value')
?????.size(2)
?????.shape('smooth');//平滑过渡
????chart.axis('time',false);
????chart.axis('value',false);
????chart.source(this.state.data.charts);
????if(this.state.data.charts.length==1){
?????chart
??????.point()
??????.position('time*value')
??????.size(2)
??????.shape('circle')
??????.style({
???????lineWidth:1
??????});
????}
????setTimeout(()={
?????conste=document.createEvent('Event');
?????e.initEvent('resize',true,true);
?????window.dispatchEvent(e);
????},50);
????chart.render();
???}else{
????message.warning(res.message);
???}
??});
?}
3、渲染节点
react倒计时插件react-countdown最近做next.js项目，项目中有个倒计时的需求，于是上github上找了找发现了一个挺好的插件react-countdown推荐给大家，github地址：
npminstallreact-countdown--save
yarnaddreact-countdown
importCountdownfrom'react-countdown';
Countdowndate={Date.now()+10000}/
这是一个倒计时为10秒的示例，以毫秒为单位显示总时间差。
如果不对显示做处理默认在页面中的显示是：00:00:00:00对应-天、小时、分、秒
插件提供了两个属性：
1、daysInHours
Boolean类型的值默认为false；设为true时，它可以将天数转化为小时表示
2、zeroPadTime
Number类型的值，设置时间显示几位数，不够的用0填充，不设置这个属性的话当小时或者秒为一位数时展示一位数
另外react-countdown还给我们提供了一个renderer属性，它接收一个方法，如果我们有特殊需求如倒计时完成后要显示什么内容可以通过renderer接收的方法中实现。
在项目倒计时中一般会进行时间差值来计算剩余时间，我在项目中进行差值计算时遇到一个bug，在chrome中倒计时正常显示但在safari中倒计时没有显示，查了资料发现safari浏览器在时间处理上有一些兼容性问题。后端返回的时间格式是:2020-3-1400:00:00,用newDate()转化后结果是InvalidDate，再getTime()得到的是NaN。原来safari不支持这种格式，把时间格式中的"-"全部替换为"/"就可以获取到时间戳了。
react-countdown插件中还提供了很多属性，有兴趣的可以上github上自行查阅。
热门标签
