reactjs - خطای TypeScript - مشخصه component در React mui MenuItem وجود ندارد

من از react mui MenuItem استفاده میکنم و نیاز دارم یک آیتم منو را به عنوان لینک بسازم. من سعی کردهام که این کار را به این شکل انجام دهم:

        <MenuItem
          component={<Link href={`/backend/api/exam/${row.id}/result`} />}
          className={classes.menuItem}
          onClick={() => handleClose()}>
          Result
        </MenuItem>

اما وقتی این کار را انجام میدهم، یک خطا رخ میدهد که میگوید ویژگی component در MenuItem وجود ندارد:

ویژگی 'component' در نوع 'IntrinsicAttributes & { action?: ((instance: ButtonBaseActions | null) => void) | RefObject | null | undefined; buttonRef?: ((instance: unknown) => void) | RefObject | null | undefined; ... 7 مورد دیگر ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & { ...; } & CommonProps<...>...' وجود ندارد. TS2322

من اینجا چه کار اشتباهی انجام میدهم، چرا این خطا را دریافت میکنم؟

پاسخ شماره ۱

مستندات:

نوع: elementType

توضیحات: یا یک رشته برای استفاده از یک عنصر DOM یا یک کامپوننت.

استفاده از یک کامپوننت بهعنوان React.Node کار نمیکند.

خصوصیت component انتظار دارد موارد زیر را دریافت کند: React.Element<typeof Component>.

در مورد شما، ارائهٔ کامپوننت به صورت typeof جواب خواهد داد:

import { Link } from 'react-router-dom';
....

<MenuItem
  component={Link}
  to={`/backend/api/exam/${row.id}/result`}
  className={classes.menuItem}
  onClick={() => handleClose()}>
  Result
</MenuItem>

راه حل دیگری میتواند این باشد که <MenuItem> خود را داخل یک <Link> قرار دهید:

<Link to={`/backend/api/exam/${row.id}/result`}>
  <MenuItem
    className={classes.menuItem}
    onClick={() => handleClose()}>
  >
    Result
  </MenuItem>
</Link>