Jexcel插件 使用react hooks+ts写法增加新表

采用hooks写法实现官网那个增加新表格的实例
官网给div挂载表格的语句是

jexcel.tabs(document.getElementById('spreadsheet'), sheets);

但是我使用的不是类组件写法 所以这一步应该改为

jexcel.createTabs(jexcelDom, sheets)

官网完整代码链接请点击
采用hooks写法 完整代码如下

import React, { useEffect, useState } from "react";
import "../../node_modules/jexcel/dist/jexcel.css";
import jexcel from 'jexcel'
import { Space } from "antd";
let el:any;
const FirstJexcel = () => {
    let jexcelDom: HTMLDivElement;
    let sheets = [
        {
            sheetName: 'Countries',
            minDimensions:[10,10]
        },
        {
            sheetName: 'Cities',
            minDimensions:[10,10]
        }
    ];
    useEffect(() => {
        el = jexcel.createTabs(jexcelDom, sheets);
        //第一个参数是被挂载的dom节点
    }, [])
    const add = ()=> {
       let sheets = [];
        sheets.push({
           sheetName: prompt('Create a new tab', 'New tab ' ),
            minDimensions:[10,10]
        });
        el = jexcel.createTabs(jexcelDom, sheets);
    }
    return (
        <div>
            <div ref={(dom: HTMLDivElement) => jexcelDom = dom} />
            <br />
            <Space>
                <input type="button" value="增加新表格" onClick={add} />
            </Space>
        </div>
    );
};
export default FirstJexcel;

运行结果：

增加表格后
会弹出提示框 可以修改表格名称 默认是new tab