web-dev-qa-db-fra.com

Comment utiliser les enfants avec React Composant fonctionnel sans état dans TypeScript?

Utiliser TypeScript avec React nous n'avons plus à étendre React.Props pour que le compilateur sache que tous les accessoires des composants React peuvent avoir des enfants:

interface MyProps { }

class MyComponent extends React.Component<MyProps, {}> {
  public render(): JSX.Element {
    return <div>{this.props.children}</div>;
  }
}

Cependant, cela ne semble pas être le cas pour les composants fonctionnels sans état:

const MyStatelessComponent = (props: MyProps) => {
  return (
    <div>{props.children}</div>
  );
};

Emet l'erreur de compilation:

Erreur: (102, 17) TS2339: La propriété "enfants" n'existe pas sur le type "MesProps".

Je suppose que c'est parce qu'il n'y a vraiment aucun moyen pour le compilateur de savoir qu'une fonction Vanilla va être donnée children dans l'argument props.

La question est donc de savoir comment utiliser les enfants dans un composant fonctionnel sans état de TypeScript?

Je pourrais revenir à l'ancienne façon de MyProps extends React.Props, mais l'interface Props est marquée comme obsolète , et les composants sans état n'ont pas ou ne prennent pas en charge un Props.ref si je comprends bien.

Je pouvais donc définir le prop children manuellement:

interface MyProps {
  children?: React.ReactNode;
}

Premièrement: ReactNode est-il le bon type?

Deuxièmement: je dois écrire des enfants en option (?) ou bien les consommateurs penseront que children est censé être un attribut du composant (<MyStatelessComponent children={} />) et déclenche une erreur si aucune valeur n'est fournie.

Il semble que je manque quelque chose. Quelqu'un peut-il préciser si mon dernier exemple est la façon d'utiliser des composants fonctionnels sans état avec des enfants dans React?

reactjstypescript
30
Aaron Beall

React 16.8 Update: Depuis React 16.8, les noms React.SFC et React.StatelessComponent sont privés. En fait, ils sont devenus des alias pour React.FunctionComponent tapez ou React.FC pour faire court.

Vous les utiliseriez cependant de la même manière:

const MyStatelessComponent : React.FunctionComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

Avant React 16.8 (Older):

Pour l'instant, vous pouvez utiliser le React.StatelessComponent<> tapez, comme:

const MyStatelessComponent : React.StatelessComponent<{}> = props =>
    <div>{props.children}</div>

Ce que j'ai ajouté ici, c'est de définir le type de retour du composant sur React.StatelessComponent type.

Pour un composant avec vos propres accessoires personnalisés (comme l'interface MyProps):

const MyStatelessComponent : React.StatelessComponent<MyProps> = props =>
    <div>
        <p>{props.propInMyProps}</p>
        <p>{props.children}</p>
    </div>

Maintenant, props a la propriété children ainsi que celles de l'interface MyProps.

J'ai vérifié cela dans TypeScript version 2.0.7

De plus, vous pouvez utiliser React.SFC au lieu de React.StatelessComponent pour plus de concision.

36
Leone

Vous pouvez utiliser React.PropsWithChildren<P> saisissez vos accessoires:

interface MyProps { }

function MyComponent(props: React.PropsWithChildren<MyProps>) {
  return <div>{props.children}</div>;
}
11
baitun