web-dev-qa-db-fra.com

React + TypeScript: Type de composant React sans état/sans accessoire

J'ai vu plusieurs exemples de composants React utilisant TypeScript:

class Foo extends React.Component<IProps, IState> {}

Il semble qu'il n'y ait pas de convention claire lorsque nous n'utilisons ni les accessoires ni l'État.

Les personnes définissent ces types comme suit: any, null, undefined, {}, void, etc.C'est ce que j'ai vu jusqu'à présent:

  1. class Foo extends React.Component<null, null> {}
  2. class Foo extends React.Component<any, any> {}
  3. class Foo extends React.Component<{}, {}> {}
  4. class Foo extends React.Component<undefined, undefined> {}
  5. class Foo extends React.Component<void, void> {}
  6. class Foo extends React.Component<object, object> {}

Quelle est la meilleure façon de le faire?

Mise à jour:

SOLUTION

Il suffit de faire - class Foo extends React.Component {} comme prop et state sont initialisés à {}

reactjstypescript
6
jobmo

De https://github.com/DefinitelyTyped/DefinitelyTyped/blob/15b7bac31972fbc081028937dfb1487507ca5fc9/types/react/index.d.ts#L199-L200

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Les accessoires et l'état sont initialisés à {}. Ainsi, pour un composant sans état ni accessoire, nous pouvons simplement faire:

class Foo extends React.Component {}
6
jobmo

Selon cette directive et mon exp, je dirais:

  1. class Foo extends React.Component<null, null> {} lorsque vous savez que vous ne recevrez ni accessoires ni état
  2. class Foo extends React.Component<any, any> {} lorsque vous savez que vous recevrez des accessoires et un état, mais vous ne vous souciez vraiment pas de leur apparence
  3. class Foo extends React.Component<{}, {}> {} jamais vu, semble étrange
  4. class Foo extends React.Component<undefined, undefined> {} idem null, à vous de choisir. Je vois plus souvent null que undefined
  5. class Foo extends React.Component<void, void> {} mauvaise idée, car semble être réservé au retour de fonctions (quand vous n'en attendez pas)

Les autres avis sont les bienvenus

5
soywod

Je crée toujours une interface d'accessoires pour chaque composant, même si elle est vide. Il garde les choses cohérentes et me permet d'ajouter facilement des accessoires plus tard si nécessaire.

Interface FooProps { }

class foo extends React.Component<FooProps, any> {
}
2
SteveKitakis

Comme répondu pour cette question , vous pouvez utiliser la classe React.SFC<{}>

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

Ou si votre marquage devient plus gros:

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

    {/*  Some code here */}
    return <div>{props.children}</div>

}
1
Leone

Stateful (composants basés sur la classe) et composants sans état, il y a beaucoup de conceptions sur Internet concernant l'utilisation de l'un ou l'autre, j'ai compris ces concepts en utilisant cette liste (avant d'avoir une expérience pratique): 

Apatride

  1. Sont préoccupés par l'apparence des choses.
  2. Peut contenir des composants de présentation et de conteneur ** à l'intérieur, , Et possède généralement ses propres balises et styles DOM.
  3. Autorise souvent le confinement via this.props.children.
  4. N'ayez aucune dépendance sur le reste de l'application, telle que les actions Flux ou les magasins .
  5. Ne spécifiez pas comment les données sont chargées ou mutées.
  6. Recevez des données et des rappels exclusivement via des accessoires.
  7. Sont écrits en tant que composants fonctionnels

Exemples: Menu, UserInfo, List, SideBar.

Stateful

  1. Sont concernés par la façon dont les choses fonctionnent.
  2. Peut contenir à la fois des composants de présentation et de conteneur ** dans , Mais n’a généralement pas de balisage DOM propre, à l’exception de quelques Divs, et n’a jamais de styles.
  3. Fournissez les données et le comportement aux composants de présentation ou autres conteneurs .
  4. Appelez les actions Redux et fournissez-les en tant que rappels aux composants de présentation .

Exemples: UserPage, FollowersSidebar, ArticlesContainer.

1
Yuri Ramos