8
votes

Réagir les composants fonctionnels avec des méthodes

Si nous voulions créer un composant sans état fonctionnel mais que nous voulions des méthodes capables d'accéder aux accessoires, comment ferions-nous cela? Existe-t-il une règle générale ou une bonne pratique en ce qui concerne des choses comme celle-ci

par exemple

function Stateless(props) {
   function doSomething(props) {
      console.log(props);
   }
  doSomething() // logs 'undefined'
return (
  <div> some stuff </div>
}

les accessoires internes ne sont toujours pas les accessoires qui sont donnés, du moins dans mon expérience.

Si je n'avais pas besoin d'un état (en utilisant Redux) mais que je voulais quand même des méthodes accédant aux accessoires, est-ce toujours une bonne pratique d'utiliser des classes et non des fonctions sans état?

javascript reactjs

2 commentaires

Pourquoi simplement appeler doSomething () sans paramètre? Il semble que vous deviez changer doSomething () en doSomething (props) pour avoir un sens

doSomething (/ * les accessoires que vous passez ne sont pas définis * /)

3 Réponses :

2
votes

function Stateless(props) {
   function doSomething() { // 1. props is accessible inside the function so you can skip the parameter
      console.log(props);
   }
  doSomething();
return (
  <div> some stuff </div>
)//2. missing paranthesis
}

0 commentaires

3
votes

Il est parfaitement bien d'utiliser des fonctions à l'intérieur de composants fonctionnels. En fait, les React hooks qui ont été introduits récemment dans React 16.8, consistent à créer des composants fonctionnels encore plus pratique en apportant des événements d'état et de cycle de vie aux composants fonctionnels via des hooks spéciaux .

Mais comme d'autres l'ont mentionné, vous devez passer des arguments appropriés à vos fonctions: doSomething (props) ou ne pas passer d'arguments du tout et par conséquent ne jamais les attendre dans la déclaration de fonction elle-même: function doSomething () .

0 commentaires

2
votes

doSomething () enregistre undefined car la variable interne props n'a pas été fournie lorsque vous avez appelé doSomething (accessoires manquants). Vous pouvez soit supprimer les accessoires internes:

function doSomething(props) {
  console.log(props);
}
function Stateless(props) {
  doSomething(props);
  return (
    <div> some stuff </div>
  );
}

Ou déclarer doSomething en dehors de votre composant:

function Stateless(props) {
  function doSomething() {
    console.log(props);
  }
  doSomething();
  return (
    <div> some stuff </div>
  );
}

Les deux fonctionneront. Le premier peut être plus simple, mais si votre composant est souvent redessiné, le second est plus performant, puisque vous ne déclarez doSomething qu'une seule fois.

0 commentaires