首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >从TS到React实现react-data-grid 7.0.0时出错

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

Stack Overflow用户
提问于 2021-01-08 16:34:41
回答 1查看 193关注 0票数 1

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

在TypeSript中有一个与我在沙箱中提供的文件相同的文件(它仅供参考)。我正在尝试实现React中的功能,但在将TS代码转换为React代码时出现了一些错误。我使用的是react-data-grid ^7.0.0-canary.33。

代码语言:javascript
复制
                    <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}
    />
  );
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-01-09 13:35:11

我知道问题出在哪里了。未从库中导出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问题链接。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65625695

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档