J'ai un composant fonctionnel sans état avec un paramètre de fonction optionnel comme propriété (onClick), j'ai essayé de définir une fonction vide comme propriété par défaut pour pouvoir le faire en toute sécurité dans mon composant:

 <span onClick={props.onClick} />

Mais j'ai l'erreur suivante: «Expression attendue».

interface IProps {
  size?: sizeType;
  onClick?: (e:any) => void;
}
const Foo: React.SFC = (props: IProps) => {
  // ...
};
const defaultProps: IProps = {
   size: 'default',
   onClick: () => void <-- Expression expected.
};
Foo = defaultProps;

Comment puis-je faire cela?

6
Fabrice 22 nov. 2017 à 18:35

4 réponses

Meilleure réponse

Vous pouvez utiliser les éléments suivants:

const defaultProps: IProps = {
   size: 'default',
   onClick: () => void(0)
};
10
Remo H. Jansen 22 nov. 2017 à 15:56

Je fais d'habitude

MyComponent.defaultProps = {
  someNoop: f => f
}

Comme quelque chose qui est court, facile à taper et retournera simplement undefined.

1
1252748 5 mars 2018 à 20:36

Je pense que l'utilisation de lodashes noop pourrait être une bonne option car en fonction du nombre de ré-rendus que le composant aura AVANT que le composant ait accès à l'accessoire, cela créera autant de références à une fonction anonyme qui est essentiellement un espace réservé pour le fonction dont vous avez besoin. Quelque chose comme:

import noop from 'lodash/noop';
MyComponent.defaultProps = {
  myfunc: noop,
};

C'est une petite optimisation mais empêche également le développeur de créer une fonction anonyme pour chaque déclaration de prop par défaut dans laquelle une fonction est nécessaire.

2
Scott Stern 8 oct. 2018 à 17:52

Vous ne pouvez pas utiliser void en javascript comme valeur de retour. Au lieu de void, utilisez null comme valeur de retour.

onClick: () => null
18
Daniel Derevjanik 22 nov. 2017 à 15:51
47438546