react hooks+Jexcel+ts 学习之 增加行和销毁表格操作

在看Jexcel官网时，官网实例都是使用react类组件形式写的，而我需要用hooks练习实现，记录一下。

npm下载：npm install jexcel
如果导入时报错，可能是版本问题
下载对应ts版本 npm install @types/jexcel --save

import React, { useEffect} from "react";
import "../../node_modules/jexcel/dist/jexcel.css";
import jexcel from 'jexcel'
import { Space } from "antd";
const FirstJexcel = () => {
    let options:any = {
        data: [[]],
        minDimensions: [10, 10]  ,
        columns:[
            { title:'Model' },
            { title:'Price' },
            { title:'Model' },//列名
        ]
    };
    let jexcelDom: HTMLDivElement;
    let el: jexcel.JExcelElement;
    useEffect(() => {
        el = jexcel(jexcelDom, options);
        //第一个参数是被挂载的dom节点
    },[])
    const addRow = () => {
        el.insertRow();//添加
    };
    const destroyTable = () => {
        jexcel.destroy(jexcelDom,true);//销毁表
    };
    return (
        <div>
            {/* div的dom赋值给jexcelDom */}
            <div ref={(dom:HTMLDivElement)=>{jexcelDom = dom}} />
            <br />
            <Space>
            <input type="button" value="Add new row" onClick={addRow}/>
            <input type="button" value="Destroy Table" onClick={destroyTable}/>
            </Space>
        </div>
    );
};
export default FirstJexcel;

运行结果
点击 添加行按钮后

点击销毁表

Jexcel官网地址