react+ts项目中使用jexcel，单元格合并

遇到的问题
1.jexcel 的导入出问题
2.初始化jexcel表格dom节点的获取问题
3.jexcel初始化返回jexcel对象没有获取到的
4.在对代码进行更改后，热更新之后页面会出现多个表格
因为公司做的项目用到了jexcel,今天我的师傅叫我看一看jexcel实现一下表格的合并，代码很简单但是晕倒的坑不少
首先下载的时候要下载对应ts版本 npm install @types/jexcel --save
1.再导入jexcel 的时候 我使用 es6 import 导入 结果不行 ，后来看了源码才知道他是用的commonsjs的规范到出的

需要使用require 导入
2.导出的jexcel 是一个工厂函数
对应的参数jexcel(挂载的dom节点，Options{}),我最开始使用的时原生获取dom节点结果报错，后来我看了官网的例子(https://bossanova.uk/jexcel/v3/examples/react)
里面使用的时Class组件的写法，现在公司都要求使用hook的写法，后来我用了ref来后去节点结果还是不行，通过多次实验发现他要这样写
3.在准备使用他的setMerge方法实现单元格合并的时候发现我得到的jexcel对象是空的
我刚开始想的是用一个普通的变量将他保存起来
结果不行，后来发现 是由于组件没有更新在后面取值的时候才拿不到，用setState就可以了

4.在对代码进行更改后，热更新之后页面会出现多个表格

打开开发者工具查看发现，挂载的根节点里面有两个相同的
查看源码发现它是使用insertiBefore插入
所以我的解决办法就是在每次组件更新的时候 将jexceDom.innerHTML = ‘’,问题解决了

完整代码

import React, { useEffect, useRef, useState } from "react";
import ReactDom from "react-dom";
// import "../node_modules/jexcel/dist/jexcel.css";
import "../../../node_modules/jexcel/dist/jexcel.css";
// import jexcel from 'jexcel'
const jexcel = require("jexcel");
const arr = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
const FirstJexcel = () => {
  let jexcelDom: any = useRef();
  let [table,setTable] =useState<any>({})
    const [colL,setColL] = useState(0)
    const [rowL,setRowL] = useState(0)
    const [colR,setColR] = useState(0)
    const [rowR,setRowR] = useState(0)
  const onselection = (
    d: HTMLElement,
    colL: number,
    rowL: number,
    colR: number,
    rowR: number
  ) => {
    setColL(colL)
    setColR(colR)
    setRowL(rowL)
    setRowR(rowR)
  };
  const onmoverow = () => {
    console.log("move row");
  };
  let Option = {
    minDimensions: [8, 8],
    onselection: onselection,
  };
  useEffect(() => {
    jexcelDom.innerHTML = ''
    
    setTable (jexcel(jexcelDom, {

        
        data: [
          ["Mazda", 2001, 2000],
          ["Pegeout", 2010, 5000],
          ["Honda Fit", 2009, 3000],
          ["Honda CRV", 2010, 6000],
        ],
        ...Option,
      }))
  });

  const returnTable = () => {
    
  };
  return (
      <div>
        <div
      id="jexcel-root"
      style={{
        height: "500px",
        width: "500px",
      }}
      ref={(dom) => {
        jexcelDom = dom;
      }}
    ></div>
    <button onClick={()=>{
        console.log(rowL,rowR,colL,colR)
        console.log(`${arr[colL]}${rowL + 1}`,Math.abs(rowL-rowR)+1,Math.abs(colL-colR)+1)
        console.log('table',table)
        table&&table.setMerge(`${arr[colL]}${rowL + 1}`,Math.abs(colL-colR)+1,Math.abs(rowL-rowR)+1)
    }}>合并</button>
    </div>
   
  );
};

export default FirstJexcel;