在react类组件使用handsonTable/react组件时怎么实时获取到hotInstance中的值并来更新表格的width

在React类组件中使用handsontable/react组件时，可以通过设置`afterChange`、`beforeColumnResize`、`afterColumnResize`等回调函数来实现实时获取`hotInstance`中的值并更新表格的宽度。

具体步骤如下：
1. 在初始化`Handsontable`时，传入需要的配置选项，并定义一个状态变量来存储表格的宽度信息。
2. 使用`ref`属性创建一个引用，这个引用将用于访问Handsontable实例。
3. 利用`afterChange`回调函数，在数据变化后执行相应的状态更新逻辑。
4. 如果需要根据列的宽度变化更新状态，可以使用`beforeColumnResize`和`afterColumnResize`回调函数来在宽度变化前后获取或更新状态。

示例代码如下：

import React, { useRef, useState, useEffect } from 'react';
import { HotTable } from 'react-handsontable';

function MyTableComponent(props) {
  const hotRef = useRef(null);
  const [tableWidth, setTableWidth] = useState(0);

  // 在组件挂载后获取实例
  useEffect(() => {
    const hotInstance = hotRef.current.hotInstance;
    // 可以在这里添加你需要执行的逻辑
  }, []);

  // 当表格宽度变化时更新状态
  const updateTableWidth = () => {
    const hotInstance = hotRef.current.hotInstance;
    setTableWidth(hotInstance.view.wt.wtTable.TABLE.scrollWidth);
  };

  // 其他需要的回调函数

  return (
    <HotTable
      ref={hotRef}
      // 其他Handsontable配置
      afterChange={updateTableWidth}
      beforeColumnResize={updateTableWidth}
      afterColumnResize={updateTableWidth}
    >
      // 表格配置
    </HotTable>
  );
}

在上面的代码中，我们首先通过`useRef`创建了一个引用`hotRef`来访问Handsontable实例，然后在`useEffect`钩子中获取实例并执行一些逻辑（如果需要的话）。我们定义了一个`updateTableWidth`函数来更新表格的宽度状态，这个函数可以在`afterChange`、`beforeColumnResize`和`afterColumnResize`等回调中被调用，以便实时地获取当前表格的宽度。