[Bug] 在 `@visactor/react-vtable` 中启用自动换行或者添加自定义组件(dom)的场景下，滚动会突然变成空白

[tylerrrkd]

Version

1.16.2

Link to Minimal Reproduction

codesandbox

Steps to Reproduce

import {
  Button,
  Group,
  ListColumn,
  ListTableSimple,
} from '@visactor/react-vtable';
import { themes } from '@visactor/vtable';
import { TextAreaEditor } from '@visactor/vtable-editors';
import { ListTable } from '@visactor/vtable/es/ListTable';
import { FieldData, RectProps } from '@visactor/vtable/es/ts-types';
import * as ReactDOM from 'react-dom';

interface CustomLayoutProps {
  role?: string;
  table?: ListTable; // 表格实例
  row?: number; // 行号
  col?: number; // 列号
  value?: FieldData; // 单元格展示数据
  dataValue?: FieldData; // 单元格原始数据
  rect?: RectProps; // 单元格布局信息
  text?: string;
}

const Cell: React.FC<CustomLayoutProps> = (props) => {
  const { table, row, col, rect, text } = props;
  if (!table || row === undefined || col === undefined) {
    return null;
  }
  const { height, width } = rect || table.getCellRect(col, row);
  const record = table.getRecordByRowCol(col, row);

  return (
    <Group
      attribute={{
        width,
        height,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
      }}
    >
      <Button padding={4} onClick={() => console.log({ ...props, record })}>
        译
      </Button>
      <Button padding={4}>删</Button>
    </Group>
  );
};

const LANGUAGE_LIST = [
  {
    id: 1033,
    name: 'English',
    code: 'en-US',
    msCode: 'en',
  },
  {
    id: 1028,
    name: '繁體中文',
    code: 'zh-TW',
    msCode: 'zh-Hant',
    androidCode: 'zh',
  },
  {
    id: 1057,
    name: 'Bahasa Indonesia',
    code: 'id-ID',
    msCode: 'id',
    androidCode: 'in',
  },
];

const COMMON_AUTO_WRAP_TEXT = {
  autoWrapText: true,
  lineClamp: 5,
};

const App = () => {
  return (
    <div className="rounded-[6px] bg-white px-[24px] py-[16px]">
      <ListTableSimple
        height={document.body.clientHeight - 165}
        onChangeCellValue={(e) => console.log(e)}
        select={{ makeSelectCellVisible: false }}
        theme={themes.DEFAULT.extends({
          headerStyle: { fontSize: 14, padding: [8, 8] },
          bodyStyle: { padding: [8, 8] },
        })}
        frozenColCount={2}
        rightFrozenColCount={1}
        defaultRowHeight="auto"
        widthMode="adaptive"
        rowSeriesNumber={{
          title: '序号',
          width: 20,
        }}
        hover={{
          highlightMode: 'row',
        }}
        records={Array.from({ length: 1000 }).fill({
            '1028':
              '写下你想让我穿什么衣服拍照？我会尽力让你满意。请把它写下来',
            '1033':
              'Write down  what clothes do you want me to wear for taking photos? I will try my best to satisfy you. Please write it down',
            '1057':
              'Tuliskan pakaian apa yang ingin Anda lihat saya kenakan untuk berfoto? Saya akan berusaha sebaik mungkin untuk memenuhi keinginan Anda. Silakan tuliskan',
            id: 'test',
            key: 'n_private_customization_edit_tips',
            description: '',
            createdAt: 1736921998328,
            collectionId: 'test',
          })}
        ReactDOM={ReactDOM}
      >
        <ListColumn
          field="key"
          title="key"
          editor={new TextAreaEditor()}
          // 启用自动换行或者启用操作列都会导致空白行
          style={COMMON_AUTO_WRAP_TEXT}
        />
        <ListColumn
          field="description"
          title="描述(可选)"
          editor={new TextAreaEditor()}
          // 启用自动换行或者启用操作列都会导致空白行
          style={COMMON_AUTO_WRAP_TEXT}
        />
        {LANGUAGE_LIST.map(({ id, name, code }) => (
          <ListColumn
            key={String(id)}
            field={String(id)}
            title={`${name}(${code})`}
            editor={new TextAreaEditor()}
            // 启用自动换行或者启用操作列都会导致空白行
            style={COMMON_AUTO_WRAP_TEXT}
          />
        ))}
        {/* 启用自动换行或者启用操作列都会导致空白行 */}
        <ListColumn title="操作" width={30}>
          <Cell role="custom-layout" />
        </ListColumn>
      </ListTableSimple>
    </div>
  );
};

Current Behavior

现象1

相同的配置，滚动过程中会出现自动换行失效

现象2

相同的配置和自定义组件(内置的 <Button /> 和 <Group />)，滚动过程中会出现对不齐、被遮挡现象

现象3

相同的配置，滚动过程中会出现空白行，此时编辑单元格，会出现渲染错位的问题

比如编辑第 672 行，会渲染到空白行内，672 行以下的，编辑时会往上少一行渲染，以此类推。

Expected Behavior

修复这种情况

Environment

- OS: Windows 11 Pro Version 24H2
- Browser: Chrome Version 133.0.6943.127 (Official Build) (64-bit)
- Framework: react@18.2.0

Any additional comments?

No response

[tylerrrkd]

假如使用自定义 DOM 节点，传递给组件的 ReactDOM 会报 warning 信息

react 和 react-dom 版本号都为 18.2.0

index.js:1 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".