时间戳

首页 > 解决方案 > 有人可以帮我将打字稿代码转换为反应代码吗

reactjs - 有人可以帮我将打字稿代码转换为反应代码吗

问题描述

有一个名为 react-data-grid 的包。该特定包上有一个示例表，但代码在 TypeScript 中，并且该特定版本的文档也不存在。我试图将打字稿转换为 React。一切都很好，直到我想实现拖放。出现了一些错误，我认为该错误是因为我以错误的方式导入了某些内容。你能告诉我我哪里做错了吗？这是沙盒链接。我的本地构建中的错误出现在第 44 行的 RowRender.js 上。我还在那里包含了打字稿文件。如果您只是在sandbox中取消注释 App.js 组件的第 72-74 行，您也可以看到错误。

标签： reactjstypescriptreact-dndreact-data-grid

解决方案

  • 将 .ts 文件重命名为 .tsx 文件。在另一种情况下，TypeScript 将无法理解<div> <Row>和其他反应元素
  • 将您关于 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);
}

推荐阅读