#### React 17版本以上的组件封装
##### flv播放器封装
介绍：支持大屏适配宽度高度百分百，支持视频切换。
解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可
使用：
```react
import {FlvCom} from "zzreact"
export default class App extends Component {
constructor() {
super();
this.state = {
vidoeUrl: ""
}
}
render() {
let {vidoeUrl} = this.state
return
}
}
```
##### time时间组件封装
介绍：用来大屏展示时间用
解释：可以加入className来自行改变样式
使用：
```react
import {Timer} from "zzreact"
export default class App extends Component {
render() {//通过下面的className写在css中样式就会生效
//type可以不传默认YYYY-MM-DD HH:mm:ss
//也可以改变，规则和moment.js中format的规则一致
return (
)
}
}
```
##### 图片请求base64地址组件
介绍：用来请求加密地址用的，支持切换。
解释：传入请求地址和图片的静态路径，切换做了处理直接改变imgUrl即可
使用：
```react
import {ImgCom} from "zzreact"
//httpImg是必穿参数
export default class App extends Component {//默认图片样式宽度100%高度自适应
constructor(){
super();
this.state = {
imgUrl:"C:/*****"
}
}
render() {
return ()
}
}
```
##### 区域选择组件封装
介绍：用来在视频上描绘区域
解释：可以设置模式点击模式和鼠标移动模式，支持移动端手指触摸移动。支持适配百分比会获取父元素的宽高来渲染画布的大小，如果父元素没有默认宽高是100px
使用：
```react
import {AreaSelete} from "zzreact"
export default class App extends Component {//默认图片样式宽度100%高度自适应
constructor(){
super();
this.state = {
serviceData:[[20, 15], [20, 80], [100, 15]]
}
}
change(val){//点发生改变的回调函数 只要点击点在松开就会触发不会判断只有位置移动了才触发可以自行判断
console.log(val)
}
render() {
return ()
}
}
```
支持传的参数：
```react
//如果一下参数不添加就是默认参数
```