打字稿/反應傳遞道具錯誤“不存在於類型......”

Question

我在嘗試讓 Typescript 使用傳遞道具時遇到了一些困難。 這是我的代碼：

應用程序.tsx

export const ProductPage = (): JSX.Element => {
  const { id } = useParams<{ id: string }>();

  return (
    <UpdateProductPage id={id} /> //throws an error here for id
  )
}

更新產品頁面.tsx

interface PropType {
  id: string;
}

export const UpdateProductPage = ({ id }: PropType): JSX.Element => {
  console.log(id)
  //unrelated logic
}

所以基本上在控制台中，我收到一條錯誤消息：

Type '{ accessToken: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'accessToken' does not exist on type 'IntrinsicAttributes'.ts(2322)

我也嘗試通過執行UpdateProductPage: React.FC<PropType>聲明道具類型，但它仍然不起作用。

Answer 1

試試這個方法：

更新產品頁面.tsx

import { FC } from 'react';

interface PropType {
  id: string;
}

export const UpdateProductPage: FC<PropType> = ({ id }): JSX.Element => {
  console.log(id)
}

或更改接口以使用類型。

type PropType = {
  id: string;
}

補充： https : //fettblog.eu/typescript-react-why-i-dont-use-react-fc/