web-dev-qa-db-fra.com

annotation de type de flux pour les enfants réagissent éléments

Existe-t-il un meilleur moyen de taper-annoter children?

type FilterLinkProps={
  filter:State$VisibilityFilter,
  children:any
};

const FilterLink = ({
  filter,
  children
}:FilterLinkProps) => {
  return (
    <a href='#'
      onClick={e => {
        e.preventDefault();
        store.dispatch(({
          type: 'SET_VISIBILITY_FILTER',
          filter
        }:Action$VisibilityFilter));
      }}
    >
    {children}
    </a>
  );
};
javascriptreactjsflowtype
11
jhegedus

Ça ne ressemble pas.

De l'officiel React libdef :

declare module react {
  declare var Children: any;
  ...
}

et alors

declare function cloneElement<Config> (
    element: React$Element<Config>,
    attributes: $Shape<Config>,
    children?: any
  ): React$Element<Config>;
8
Gabriele Petronella

Flow v0.53 prend en charge children out of the box !!

import * as React from 'react';

type Props = {
  children?: React.Node,
};

Plus d'infos lire documents officiels ou le suivant { article de blog } _ à ce sujet.

Pour les anciennes versions du flux, vous pouvez effectuer les opérations suivantes:

import React from 'react';
import type { Children } from 'react';
type Props = {
  children?: Children,
};
const SampleText = (props: Props) => (
  <div>{props.children}</div>
);

Dans les deux cas, la variable children doit être déclarée sous la forme d'un type nullable .

Il semble qu'ils vont avancer d'un peu avec l'arrivée de la fibre, espérons qu'ils le feront!

Suite à la discussion dans github

Aide-mémoire: _ ​​ http://www.saltycrane.com/blog/2016/06/flow-type-cheat-sheet/

27
locropulenton
type Text = string | number;
type Fragment = Iterable<Node>;
type ReactNode = React$Element<any>
  | Text
  | Fragment;

ReactNode devrait être le type d'enfants, mais caveat emptor.

Source: J'ai vu cette construction dans certains problèmes de github sur le flux repo, je crois.

0
Robert Balicki