从 TS 到 React 实施 react-data-grid 7.0.0 时出错

如何解决从 TS 到 React 实施 react-data-grid 7.0.0 时出错

我正在尝试在 react-data-grid 中实现 DnD 功能，但我得到了 "TypeError: Object(...) is not a function" Error。

TypeSript 中有一个和我在沙箱中提供的文件相同的文件（仅供参考）。我正在尝试在 React 中实现该功能，但在将 TS 代码转换为 React 代码时出了点问题。我正在使用 react-data-grid ^7.0.0-canary.33。

                    <DndProvider backend={HTML5Backend}>
                      <DataGrid
                        roWrenderer={p => <DraggableRoWrenderer {...p} onRowReorder={onRowReorder} />}                  
                      />
                    </DndProvider>
// this is the component where the error is. I think I'm doing something wrong when typing react code(the orignal implementation is in TS)

import { useDrag,useDrop } from 'react-dnd';
import { Row } from 'react-data-grid';
import useCombinedRefs from 'react-data-grid';
// import { row } from 'react-dnd'
import clsx from 'clsx';
import './DraggableRoWrenderer.less';

export default function DraggableRoWrenderer({
  rowIdx,isRowSelected,className,onRowReorder,...props}) {
  const [{ isDragging },drag] = useDrag({
    item: { index: rowIdx,type: 'ROW_DRAG' },collect: monitor => ({
      isDragging: monitor.isDragging()
    })
  });

  const [{ isOver },drop] = useDrop({
    accept: 'ROW_DRAG',drop({ index,type }) {
      if (type === 'ROW_DRAG') {
        onRowReorder(index,rowIdx);
      }
    },collect: monitor => ({
      isOver: monitor.isOver(),canDrop: monitor.canDrop()
    })
  });

  className = clsx(
    className,{
      'rdg-row-dragging': isDragging,'rdg-row-over': isOver
    }
  );

  return (
    <Row
      ref={useCombinedRefs(drag,drop)}
      rowIdx={rowIdx}
      isRowSelected={isRowSelected}
      className={className}
      {...props}
    />
  );
}

解决方法

我知道问题出在哪里了。 UseCombinedRef 未从库中导出。所以我所做的是在我的文件中复制内部函数。 function useCombinedRefs(...refs) { return useCallback(handle => { for (const ref of refs) { if (typeof ref === 'function') { ref(handle); } else if (ref !== null) { ref.current = handle; } } },refs); }

只需粘贴此函数而不是导入它，您就可以开始使用了。感谢@drag13 解决了这个问题。 Duplicate 问题在这里。 Sandbox 链接在这里。 Library 问题链接在这里。