react-window构造的虚拟列表使用react-resizable动态调整宽度和使用react-drag-listview拖拽变换列位置的问题

import React, { useState } from 'react';
import { VariableSizeList as List } from 'react-window';
import { Resizable } from 'react-resizable';
import Draggable from 'react-draggable';
import 'react-draggable/lib/Draggable.css';

const Item = ({
  isResizing,
  isDragging,
  key,
  style,
  item, // This is the item from the list
}) => {
  const [width, setWidth] = useState(item.size);
  const onResize = (e, { size }) => {
    setWidth(size.width);
  };

  return (
    <Draggable key={key} draggableId={key} index={key}>
      {provided => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
        >
          <Resizable
            width={width}
            height={50}
            onResize={onResize}
            // Additional props for react-resizable
          >
            {/* Your component content */}
          </Resizable>
        </div>
      )}
    </Draggable>
  );
};

const VirtualList = ({ itemCount }) => {
  // Implement a way to get the widths for your items
  const getItemSize = index => ({
    size: getItemWidth(index), // Replace with your logic
    offset: 0, // Replace with your logic
  });

  return (
    <List
      height={500}
      itemCount={itemCount}
      itemSize={getItemSize}
      // Additional props for react-window
    >
      {Item}
    </List>
  );
};

// Usage
const App = () => {
  const itemCount = 1000; // Replace with your total items
  return <VirtualList itemCount={itemCount} />;
};

export default App;