#### React 17版本以上的组件封装
##### flv播放器封装
介绍：支持大屏适配宽度高度百分百，支持视频切换。
解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可
使用：
```react
import {FlvCom} from "zzreact"
export default class App extends Component {
constructor() {
super();
this.state = {
videoUrl: ""
}
}
render() {
let {videoUrl} = this.state
return
}
}
```
##### 支持多种格式的播放器（基于dplayer封装）
介绍：支持大屏适配，支持移动端，自动播放（要是不能自动播放就是浏览器不支持）支持截图
解释：只需要传入不同的videoUrl，切换做了处理直接改变videoUrl即可（根据url识别视频格式，这里还没有处理，现在只支持）
```react
import {AllVideoCom} from "zzreact"
export default class App extends Component {
constructor() {
super();
this.state = {
videoUrl: ""
}
}
render() {
let {videoUrl} = this.state
return
}
}
```
支持参数：
```react
```
##### 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) //注：当添加了disabled=”true“没有此回调函数
}
wenziChange(val){//这个是文字发生变化的然后返回一个新的值
console.log(val) //注：当添加了disabled=”true“没有此回调函数
}
render() {
return (
this.change(val)} wenziChange={(val)=>this.wenziChange(val)}>
)
}
}
```
支持传的参数：
```react
//如果一下参数不添加就是默认参数
```
##### 区域多功能封装
介绍：支持多边形和矩形模式
解释：多边形当绘制完成时点击鼠标右键即可完成就不在绘制，可以进行随意拽动,也可以自行扩展成动态添加多个矩形或者多边形
使用：
```react
import {FunAreaSelect} from "zzreact"
export default class App extends Component {
change(val){//点位画好就会返回数组，如果是多边形点击右键的时候会返回数组，当数组变化的时候会返回
//如果是矩形当拉出框的时候就会发生变化返回数组
//mode不些默认是多边形
console.log(val) //注：当添加了disabled=”true“没有此回调函数
}
wenziChange(val){//文字发生变化的时候进行改变
console.log(val) //注：当添加了disabled=”true“没有此回调函数
}
render() {
return (
this.wenziChange(val)} mode="react" change={(val) => this.change(val)}>
)
}
}
```
支持传的参数：
```react
//如果一下参数不添加就是默认参数
```
##### 升级版区域选择
介绍：继承选区多功能的基础上进行封装，拥有按钮可以自定义样式
解释：如果觉的不好用也可以自行封装，用里ref可以直接调用里面的方法
（注意：如果你不自己封装就不用看这个）
this.refs[这里是帮定的ref].myRef可以取出canvas中的元素可以打印出来看下
this.refs[这里是帮定的ref].myRef.selectBox(x,y)这个方法是判断点击是否点击到点上
this.refs[这里是帮定的ref].isNull()这个方法是判断你的画布是否为空用于你添加的时候看看是否允许你添加
this.refs[这里是帮定的ref].clickIt("react")//这里是添加矩形也可以添加多边形
this.refs[这里是帮定的ref].delete()//可以删除图形
使用：
```react
import {FunAreaSelectPlus} from "zzreact"
export default class App extends Component {
constructor() {
super();
this.state = {
list: []//可以设置初始值 传的数据要是这个格式
//{id:new Date().getTime()+""+item.id,
//mode:"react",
//serviceData:item.coordinate}
}
}
changeSelect(val) {//修改完的list传到父组件中
this.setState({
list:val
})
}
wenziChange(val,index){//修改文字后放入里面 第一个值是修改后的值，后面的index是修改list中的索引
var {list} = this.state
list[index].title = val
this.setState({
list:list
},()=>{
console.log(this.state.list)
})
}
delete(selectIndex){//删除的id会返回给父组件
let {list} = this.state
list = list.filter(item=>item.id!==selectIndex)
this.setState({list:list})
}
err(falg,msg){//当画布为空的时候，绘画进行行中的时候，会返回状态和错误的消息
console.log(falg,msg)
}
render() {
return (
{ this.wenziChange(val,index)}}
change={(val) => { this.changeSelect(val)}} delete={(selectIndex)=>{this.delete(selectIndex)}} err={(falg,msg)=>{this.err(falg,msg)}}>
)
}
}
```
支持传的参数：
```react
//如果一下参数不添加就是默认参数
```