2
votes

Passer une fonction vide dans un composant React

J'ai un composant React; par exemple:

<Component1 onMouseClick={() => function(){}} a={1} b={2} />

L'un des accessoires qu'il accepte est une fonction:

<Component1 onMouseClick={() => void} a={1} b={2} />

Donc, lorsque j'utilise ce composant, je peux faites quelque chose comme ceci:

<Component1 onMouseClick={() => this.DoStuff()} a={1} b={2} />

Mais que se passe-t-il si je veux passer une fonction nulle, pour que la fonction ne fasse rien lors d'un clic de souris; par exemple:

export interface IProps {    
    a: number,
    b: number,
    onMouseClick: () => void
}

Typescript me gémit, disant qu'il attend une expression. Je peux déclarer une fonction vide; comme ceci:

export class Component1 extends Component<IProps, IState> {

Y a-t-il une meilleure façon de déclarer une fonction vide? Je ne sais pas non plus pourquoi je peux attribuer la propriété onMouseClick à void dans la définition IProps, mais pas lors de l'utilisation du composant.

reactjs typescript

1 commentaires

() => {} ? () => void est un type pour une fonction void, d'où son utilisation dans l'interface, pas réellement une définition de fonction.

5 Réponses :

2
votes

Essayez

export interface IProps {    
    a: number,
    b: number,
    onMouseClick: () => void | null
}

export interface IProps {    
    a: number,
    b: number,
    onMouseClick?: () => void
}

1 commentaires

La deuxième méthode utilise les types d'union: typescriptlang.org/docs/handbook/advanced-types .html

2
votes

() => void est un type en ce qui concerne le typographie (et est en fait une erreur de syntaxe en Javascript). Vous devriez essayer () => void 0 qui est une fonction qui retourne

export interface IProps {    
    a: number,
    b: number,
    onMouseClick?: () => void // ? makes it optional
}
<Component1 a={1} b={2} /> // no error

ou si vous voulez autoriser null ou être facultatif, modifiez le type de prop pour inclure null , bien que vous ayez besoin d'une vérification supplémentaire dans le composant

<Component1 onMouseClick={() => void 0} a={1} b={2} />

0 commentaires

0
votes

vous pouvez le rendre facultatif

class ... extends React.Component<...>{
 static defaultProps = {
  onMouseClick: () => null,
 }
}

et vous voudrez probablement faire des accessoires par défaut avec l'implémentation par défaut afin que vous n'ayez pas à vérifier si onMouseClick est une fonction à chaque fois que vous l'utilisez p>

export interface IProps {    
    a: number,
    b: number,
    onMouseClick?: () => void 
}

0 commentaires

4
votes

Le void est un opérateur en JavaScript et il doit être suivi d'une expression. Donc () => void n'est pas une définition de rappel valide. La fonction Noop ressemble à ceci () => {} et peut être utilisée dans jsx comme ceci:

interface IProps {    
   a: number,
   b: number,
   onMouseClick?: () => void
}

Mais je préfère rendre `onMouseClick facultatif, c'est beaucoup plus pratique et évidente pour un consommateur du composant

<Component1 onMouseClick={() => {}}  a={1} b={2}/>

1 commentaires

Les réponses basées uniquement sur le code sont déconseillées. Veuillez cliquer sur modifier et ajouter quelques mots résumant la façon dont votre code répond à la question, ou peut-être expliquer en quoi votre réponse diffère de la précédente réponses. De l'avis

-1
votes

Je pense que cela peut être utile en tenant compte des linters

<Component1 onMouseClick={() => void undefined} a={1} b={2} />

0 commentaires