reactjs - Mais específico que ReactNode?

Eu defini props para um componente:

interface HeaderProps{
  title: string;
  image: string;
  link: ReactNode;
}

'link' refere-se a outro componente, <Link />

Então eu o defino como um ReactNode.

Existe algo mais específico que eu possa usar em vez de ReactNode? Tipo typeof Link ou apenas Link?

Resposta #1

Digitando para Permitir Apenas Componente Específico

Como React.ReactElement<> aceita qualquer tipo de elemento, você também pode fazê-lo aceitar estritamente algum tipo específico de componente. Digamos que você tenha um componente Header que só deve funcionar se receber um componente Link. Você pode tipá-lo da seguinte forma

//link interface

interface Link {
  link: string
}

const Link = ({ children }: Link) => <span>{children}</span>


Then in your interface HeaderProps

interface HeaderProps{
  title: string;
  image: string;
  link: ReactElement<Link>;
}

// Correct usage
<Header>
....
<Link>Some content</Link>

</Header>

// Wrong usage
<Header>
...
<Link>{true}</Link>

</Header>