在 Typescript 的功能組件中傳遞接口道具

Question

錯誤：

實際上，如果我在界面上添加一個問號，我可以解決這個錯誤。 但是，我希望它應該在沒有問號的情況下工作。 我錯過了什么還是添加問號是否正確？

這是'Main.tsx'

import * as React from 'react';

interface ICamp {
  id: number;
  type: 'popular' | 'specialDiscount';
  dateStart: string;
  thumbnail: string;
  campName: string;
  //인가 부트 캠프
  status?: '모집전' | '모집중' | '모집완료';
  //특가 할인 캠프
  category?: string;
  //커뮤니티
  tag?: '조회수 TOP' | '취업 고민';
}

// export default function Main(props: ICamp) {
//   return <div style={{ backgroundColor: 'red' }}>This is main</div>;
// }

export const Main: React.FC<ICamp> = ICamp => {
  return <div style={{ backgroundColor: 'red' }}>This is main</div>;
};

這是Router.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Nav from './components/Nav/Nav';
import { Main } from './main/Main';
import Detail from './detail/Detail';
import Footer from './components/Footer/Footer';

function Router() {
  return (
    <BrowserRouter>
      <Nav />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/main" element={<Main />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}
export default Router;

Answer 1

因為您必須至少將以下道具傳遞給組件：

id: number;
type: 'popular' | 'specialDiscount';
dateStart: string;
thumbnail: string;
campName: string;

像那樣：

element={<Main id={1} ... />} />

Answer 2

您正在創建一個功能組件並告訴 TypeScript，您希望將強制道具數據傳遞給該組件。 如果您不需要將任何道具傳遞給您的組件，您可以通過添加問號將它們標記為“可選”。

通過閱讀您的路由器代碼，我發現您沒有傳遞該強制性道具數據，因此 TypeScript 將引發錯誤。