使用 react-data-grid 时如何导入 useCombinedRefs

问题描述

我正在尝试基于以下示例使用 react-data-grid 实现可拖动列：https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/ColumnsReordering.tsx

我看到这个例子需要创建一个 DraggableHeaderRenderer 文件，所以我将以下文件复制到我的项目中并将其转换为 React：https://github.com/adazzle/react-data-grid/blob/canary/stories/demos/components/HeaderRenderers/DraggableHeaderRenderer.tsx

我的问题是我不知道从哪里导入 useCombinedRefs。 它不是从 react-data-grid 导出的。我在 repo 中看到它位于 src/hooks 中。

我尝试了以下方法：

import {useCombinedRefs} from 'react-data-grid'
// Error: Attempted import error: 'useCombinedRefs' is not exported from 'react-data-grid'.

import  {useCombinedRefs}  from 'react-data-grid/lib/hooks';
// Error: Module not found: Can't resolve 'react-data-grid/lib/hooks' in 'C:\Users\Liam\Desktop\Work\MyProject\src\ReactDataGrid'

import  useCombinedRefs  from 'react-data-grid/lib/hooks/useCombinedRefs';
// Error: Module not found: Can't resolve 'react-data-grid/lib/hooks/useCombinedRefs' in 'C:\Users\Liam\Desktop\Work\MyProject\src\ReactDataGrid'

感谢任何可以提供帮助的人。

这是我的代码： DraggableHeaderRenderer.js

import { useDrag,useDrop } from 'react-dnd';
import React from 'react'

import { SortableHeaderCell } from 'react-data-grid';
import  useCombinedRefs  from 'react-data-grid/lib/hooks/useCombinedRefs';


export function DraggableHeaderRenderer({ onColumnsReorder,column,sortColumn,sortDirection,onSort }) {
  const [{ isDragging },drag] = useDrag({
    item: { key: column.key,type: 'COLUMN_DRAG' },collect: monitor => ({
      isDragging: !!monitor.isDragging()
    })
  });

  const [{ isOver },drop] = useDrop({
    accept: 'COLUMN_DRAG',drop({ key,type }) {
      if (type === 'COLUMN_DRAG') {
        onColumnsReorder(key,column.key);
      }
    },collect: monitor => ({
      isOver: !!monitor.isOver(),canDrop: !!monitor.canDrop()
    })
  });

  return (
    <div
      ref={useCombinedRefs(drag,drop)}
      style={{
        opacity: isDragging ? 0.5 : 1,backgroundColor: isOver ? '#ececec' : 'inherit',cursor: 'move'
      }}
    >
      <SortableHeaderCell
        column={column}
        sortColumn={sortColumn}
        sortDirection={sortDirection}
        onSort={onSort}
      >
        {column.name}
      </SortableHeaderCell>
    </div>
  );
}

TestDataGrid.js

import React from 'react';
import DataGrid from 'react-data-grid';
import {DraggableHeaderRenderer} from './DraggableHeaderRenderer';
import { useState,useCallback,useMemo } from 'react';
import 'react-data-grid/dist/react-data-grid.css';

const createRows = () => {
  const rows = [];
  for (let i = 1; i < 500; i++) {
    rows.push({
      id: i,task: `Task ${i}`,complete: Math.min(100,Math.round(Math.random() * 110)),priority: ['Critical','High','Medium','Low'][Math.round(Math.random() * 3)],issueType: ['Bug','Improvement','Epic','Story'][Math.round(Math.random() * 3)]
    });
  }

  return rows;
}

const createColumns = () => {
  return [
    {
      key: 'id',name: 'ID',width: 80,},{
      key: 'task',name: 'Title',resizable: true,sortable: true,draggable: true
    },{
      key: 'priority',name: 'Priority',{
      key: 'issueType',name: 'Issue Type',{
      key: 'complete',name: '% Complete',draggable: true
    }
  ];
}

export default function TestDataGrid() {

  const [rows] = useState(createRows)
  const [columns,setColumns] = useState(createColumns)

  const draggableColumns = useMemo(() => {
    const HeaderRenderer = (props) => {
      return <DraggableHeaderRenderer {...props} onColumnsReorder={handleColumnsReorder}/>
    }

    const handleColumnsReorder = (sourceKey,targetKey) => {
      const sourceColumnIndex = columns.findIndex(c => c.key === sourceKey);
      const targetColumnIndex = columns.findIndex(c => c.key === targetKey);
      const reorderedColumns = [...columns];

      reorderedColumns.splice(
        targetColumnIndex,reorderedColumns.splice(sourceColumnIndex,1)[0]
      );

      setColumns(reorderedColumns);
    }

    return columns.map(c => {
      if(c.key === "id") return c;
      return {...c,HeaderRenderer}
    });
  },[columns])



  return (
    <DataGrid
      columns={draggableColumns}
      rows={rows}
    />
  );
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-data-grid reactjs reactjs