[英]AutoCompleteEditor(react-data-grid) not working in chrome
[英]Error on implementing react-data-grid 7.0.0 from TS to React
我正在嘗試在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 。 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); }
只需粘貼此 function 而不是導入它,您就會對 go 很好。 感謝@drag13 解決了這個問題。 這里有重復的問題。 沙盒鏈接在這里。 圖書館問題鏈接在這里。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.