react插件(react插件开发)
react插件可以写js代码不用写类型
使用插件 react-load-script
如果没有安装可以使用
yarn add react-load-script
或者
npm install react-load-script
，看你使用哪个包管理工具。
然后你就可以像使用React组件那样插入JS，如下代码。
import React from 'react';
import Script from 'react-load-script';
class DynamicScriptExample extends React.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
/
);
}
}
export default DynamicScriptExample;
react倒计时插件react-countdown
最近做next.js项目，项目中有个倒计时的需求，于是上github上找了找发现了一个挺好的插件react-countdown推荐给大家，github地址：
npm install react-countdown --save
yarn add react-countdown
import Countdown from 'react-countdown';
Countdown date={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-14 00:00:00,用new Date()转化后结果是Invalid Date，再getTime()得到的是NaN。原来safari不支持这种格式，把时间格式中的"-"全部替换为"/"就可以获取到时间戳了。
react-countdown插件中还提供了很多属性，有兴趣的可以上github上自行查阅。
react中使用G2插件实现折线图
效果图
1、引入
2、?componentDidMount函数中获取数据并渲染
componentDidMount() {
? ? let params = {};
? ? api.getMeetingDurationChart(params).then(res = {
? ? ? if (res.responseObject) {
? ? ? ? for (let index in res.responseObject.charts) {
? ? ? ? ? var item = res.responseObject.charts[index];
? ? ? ? ? item.value = totalTime(item.value);
? ? ? ? }
? ? ? ? this.setState({
? ? ? ? ? data: res.responseObject
? ? ? ? });
? ? ? ? //折线部分
? ? ? ? const chart = new G2.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 (
? ? ? ? ? ? ? 'div class="tooltip-custom"pspan class="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(() = {
? ? ? ? ? const e = document.createEvent('Event');
? ? ? ? ? e.initEvent('resize', true, true);
? ? ? ? ? window.dispatchEvent(e);
? ? ? ? }, 50);
? ? ? ? chart.render();
? ? ? } else {
? ? ? ? message.warning(res.message);
? ? ? }
? ? });
? }
3、渲染节点
react 页面缓存插件react-router-cache-route
此插件可以满足缓存上一页的功能，即：返回上一页的时候，上一页的滚动条、动作状态等等和离开这个页面时的状态保持一致。
搭配 react-router 工作的、带缓存功能的路由组件，类似于 Vue 中的 keep-alive 功能。
Route 中配置的组件在路径不匹配时会被卸载（render 方法中 return null），对应的真实节点也将从 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-native常用插件
顶部tab切换：npm install @react-navigation/material-top-tabs react-native-tab-view
react-native-shadow
react-native-linear-gradient
