src/index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { FlvCom, Timer, ImgCom, AreaSelete, FunAreaSelect } from "./components/index"
// import {FlvCom,Timer,ImgCom,AreaSelete} from "../dist/index.js"
class App extends Component {
    constructor() {
        super();
        this.state = {
            imgUrl: "C:/imagelib/imgalarm/2020/12/21/192.168.166.155/192.168.166.155_00_20201221181716755_ALARM_210_9891_HEL_SNAP.jpg",
            serviceData: [[431, 55], [479, 55], [481, 107], [435, 107]],
            // arr: [
            //     {
            //         id: "1", title: "点位1", serviceData: [
            //         ["95.16", "13.60"],
            //         ["126.40", "13.37"],
            //         ["127.37", "28.82"],
            //         ["95.65", "28.59"]]
            //     },
            //     { id: "2", title: "点位2", serviceData:[
            //         ["210.34", "12.68"],
            //         ["233.76", "12.68"],
            //         ["234.74", "24.67"],
            //         ["212.29", "24.67"]
            //     ] },
            //     { id: "3", title: "点位3", serviceData:[
            //         ["256.21", "29.51"],
            //         ["283.05", "29.51"],
            //         ["282.08", "41.50"],
            //         ["257.19", "41.50"]
            //     ] },
            // ],
            serviceData2: []
        }
    }
    clickIt() {
        this.setState({
            serviceData2: [[20, 21], [20, 80]]
        })
    }
    change(val) {
        // console.log(val)
    }
    render() {
        let { imgUrl, serviceData, serviceData2,arr } = this.state;
        return (
            <div style={{
                width: "1000px", height: "100%"
            }}>
                <button onClick={() => this.clickIt()}>切换</button>
                <div style={{ width: "81.2%", height: "80%" }}>
                    <FunAreaSelect></FunAreaSelect>
                    {/* {
                        arr.map(item=>{
                            return <AreaSelete key={item.id} title={item.title} serviceData={item.serviceData} change={(val) => this.change(val)}></AreaSelete>
                        })
                    } */}
                    {/* <AreaSelete ref={(inst) => { this.myRef = inst } } serviceData={serviceData2} change={(val)=>this.change(val)}></AreaSelete> */}
                </div>
                {/* <ImgCom httpImg="http://112.125.25.140:8083/syboxms/getImgDataByPath"  imgUrl={imgUrl}></ImgCom> */}
                {/* <FlvCom vidoeUrl=""></FlvCom>
                <Timer className="timerComCssss" type="YYYY-MM-DD HH:mm:ss"></Timer>  */}
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));