javascript - hvordan gjøre en Next.js "Link" sin "href"-egenskap valgfri

Jeg har laget Next.js Link som en tilpasset React-funksjon med TypeScript siden 'href'-egenskapen er nødvendig for 'Link' for å kunne bruke den hvor som helst jeg vil. Så jeg kunne ikke bruke den som en knapp som fungerer som en sendeknapp i skjemaer.

import NextLink, { LinkProps } from "next/link";
import { HTMLProps, FC } from "react";

export const LinkButton: FC<LinkProps & HTMLProps<HTMLAnchorElement>> = ({
  as,
  children,
  href,
  replace,
  scroll,
  shallow,
  passHref,
  className,
  title,
  onClick,
  ...rest
}) => (
  <NextLink
    as={as}
    href={href}
    passHref={passHref}
    replace={replace}
    scroll={scroll}
    shallow={shallow}
  >
    <a className={className} {...rest}>
      {children || title}
    </a>
  </NextLink>
);

og når jeg brukte det et sted ga det meg denne feilen

<LinkButton onClick={() => alert("hello")} title="Find Events" />

Property 'href' is missing in type '{ onClick: () => void; title: string; }' but required in 
type 'LinkProps'.

hvordan kunne jeg gjøre href valgfritt da hvis det ikke blir kalt, kan jeg betinget legge til en "" tag i stedet for "" tag

Svar #1

Du kan utelate href-egenskapen og definere den som valgfri:

Omit<LinkProps & HTMLProps<HTMLAnchorElement>, "href"> & { href?: string }

og deretter inne i komponentens props-destrukturering må du spesifisere standardverdi

...
href = "",
...