React 和 TypeScript，出现“Type预期”错误

Question

我正在将 React 组件从 JS 转换为 Typescript (*.ts)。它给出了“预期类型”下方的错误。我该如何解决这个问题？

const SisenseDashboard = () => {

  const sisenseRef = React.useRef(null);

  return (
    <>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        marginBottom={2}
      >
        <h2>In-App Reporting</h2>
      </Box>
      <Box
        ref={sisenseRef}
        id="sisense-container"
        className="sisense-demo"
      ></Box>
    </>
  );
};

Answer 1

确保您的组件文件扩展名.tsx不是.ts. 这应该可以解决您的问题。另外，你可以告诉 TypeScript 你的函数是一个 React 函数组件，例如，借助FCReact 的类型：

import {FC} from "react";

const SisenseDashboard : FC = () => {

  const sisenseRef = React.useRef(null);

  return (
    <>
      <Box
        display="flex"
        flexDirection="column"
        alignItems="center"
        marginBottom={2}
      >
        <h2>In-App Reporting</h2>
      </Box>
      <Box
        ref={sisenseRef}
        id="sisense-container"
        className="sisense-demo"
      ></Box>
    </>
  );
};