Блог

Существует пакет под названием react-data-grid . И в этом конкретном пакете есть таблица примеров, но код написан на TypeScript, а также документы для этой конкретной версии отсутствуют. Я попытался преобразовать typescript в React. Все было хорошо, пока я не захотел реализовать перетаскивание. Возникает какая-то ошибка, и я думаю, что эта ошибка связана с тем, что я импортирую что-то неправильно. Можете ли вы сказать мне, где я делаю что-то не так? Вот ссылка на песочницу. Возникает ошибка в моей локальной сборке RowRender.js в строке номер 44. Я также включил туда файл typescript. Вы также можете увидеть ошибку, если просто раскомментируете строку 72-74 из App.js компонент в песочнице.

• Переименуйте файл .ts в файл .tsx. В другом случае TypeScript не поймет <div> <Row> и другие элементы react
• Обновите свой импорт в отношении react-data-grid до: import { Row, RowRendererProps } from "react-data-grid";
• Обновите свой импорт import { useCombinedRefs } from ... , чтобы извлечь хук из правильного места.
• Если вы увидите ошибку, касающуюся импорта по умолчанию для React — измените import React from 'react' import * as React from "react"; или обновите tsconfig для поддержки синтетического импорта

useCombinedRefs — это внутренняя функция, которая не экспортируется, поэтому вы не можете использовать ее напрямую. Вариант № 1 — напишите его самостоятельно. Вариант № 2 найдите причину, по которой вы пытаетесь использовать внутреннюю функцию. Должен быть лучший способ.

 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);
}