React + TypeScript n'autorisent que les enfants de type spécifique

Question

Je rencontre un problème lorsque j'essaie de permettre que seuls des enfants spécifiques soient transmis à un composant.

Voici mes composants, HeaderLink

import { SFC, ReactElement } from "react";

import "./Header.scss";

export interface IHeaderLinkProps {
  url: string;
  label: string;
}

const HeaderLink: SFC<IHeaderLinkProps> = ({ url, label }): ReactElement => (
  <li className="nav-item">
    <a href={url}>{label}</a>
  </li>
);

export default HeaderLink;

et En-tête

import { SFC, ReactElement } from "react";
import { IHeaderLinkProps } from "./HeaderLink";

import "./Header.scss";

interface IHeaderProps {
  children: ReactElement<IHeaderLinkProps> | ReactElement<IHeaderLinkProps>[];
}

const Header: SFC<IHeaderProps> = ({ children }): ReactElement => {
  return (
    <header className="header">
      <div className="container">
        <div className="row">
          <div className="col">
            <img
              className="header__logo"
              src={"/logo.png"}
              alt="monqrime-logo"
            />

            <ul className="header__nav">{children}</ul>
          </div>
        </div>
      </div>
    </header>
  );
};

Le problème est donc que je veux permettre que seuls les composants HeaderLink soient transmis comme enfants à l'en-tête, mais ma solution actuelle me permet toujours de mettre tout comme enfants.

Answer 1

Je déclarerais probablement IHeaderProps.children comme :

children: React.ReactElement<IHeaderProps> | React.ReactElement<IHeaderProps>[];

Pour tenir compte de la possibilité d'avoir à la fois un seul et plusieurs enfants.

Dans tous les cas, ce que vous voulez n'est pas possible. Voir :

• Comment restreindre le type de React Children en TypeScript, en utilisant la nouvelle prise en charge de TypeScript 2.3 ?

• Vérification du type des enfants des composants React avec Typescript

Ce que vous pourriez faire à la place, c'est déclarer une propriété, disons links?: IHeaderLinkProps[] pour transmettre les accessoires dont vous avez besoin pour les créer. HeaderLink plutôt que leur JSX, et les rendre à l'intérieur de Header :

interface IHeaderProps {
  children?: never;
  links?: IHeaderLinkProps[];
}

...

const Header: React.FC<IHeaderProps> = ({ links }) => {
  return (
    ...

    <ul className="header__nav">
      { links.map(link => <HeaderLink key={ link.url } { ...link } />) }
    </ul>

    ...
  );
};