Explorer les défis du rendu conditionnel dans les composants personnalisés React

Question

Je rencontre un problème avec le rendu conditionnel dans un composant personnalisé de mon application React. J'ai travaillé sur la création d'un composant personnalisé pour le rendu conditionnel qui restitue le contenu uniquement lorsque certaines conditions sont remplies. Voici mon code actuel :

importer React depuis 'react';

function ConditionalRenderComponent({ condition, enfants }) {
  retour (
    

      {état et enfants}
    
  );
}

exporter le ConditionalRenderComponent par défaut ;
≪/pré>
Lors de l'utilisation de ce composant personnalisé, j'ai remarqué que le contenu passait par l'attribut children même lorsque condition consulté et exécuté. Ceci est différent du comportement de l'utilisation de condition && 
 directement sans composant personnalisé, où la condition est false L'accès au contenu est correctement bloqué. 

Voici comment j'utilise les composants personnalisés :
importer React, { useState, useEffect } depuis 'react';
importer ConditionalRenderComponent depuis './ConditionalRenderComponent' ;

fonction App() {
  const [userData, setUserData] = useState(null);
  const isLoggedIn = userData !== null;

  useEffect(() => {
    setTimeout(() => {
      setUserData({
        nom d'utilisateur : 'john_doe',
        e-mail : 'john@example.com'
      });
    }, 1000);
  }, []);

  retour (
    

      
Bienvenue dans mon application
      
        

          
Bonjour, {userData.username} ! 
          
Votre e-mail : {userData.email}
        
      
      {!isLoggedIn && 
Veuillez vous connecter pour accéder aux données utilisateur. 
}
    
  );
}

exporter l'application par défaut ;
≪/pré>
Dans l'exemple ci-dessus, userData est initialement null et est ensuite renseigné avec les données récupérées du serveur. La condition isLoggedIn dépend du fait que userData 
Cependant, même si la condition isLoggedIn est false (avant d'obtenir les données), le contenu de ConditionalRenderComponent pour accéder et afficher userData. Cela entraîne le message d'erreur : "TypeError : Impossible de lire les propriétés de null (lecture de 'nom d'utilisateur')". 
Comparaison avec le rendu conditionnel standard : 
Voici une comparaison du comportement en utilisant l'approche standard condition &&
// Rendu conditionnel standard
{isLoggedIn &&
  

    
Bonjour, {userData.username} ! 
    
Votre e-mail : {userData.email}
  
)}
≪/pré>
Comme indiqué dans le code ci-dessus, l'utilisation de méthodes standard bloque correctement l'accès à la valeur de userData lorsque la condition est false. 
Je ne sais pas pourquoi cette différence de comportement se produit lors de l'utilisation d'un composant personnalisé avec l'attribut children J'ai essayé de déboguer et de chercher des solutions mais je n'ai pas encore trouvé de réponse claire. 
 Toute idée ou suggestion sur la raison pour laquelle cela pourrait se produire et sur la façon de modifier le composant personnalisé pour obtenir le comportement de rendu conditionnel attendu pour l'attribut children 
Merci d'avance pour votre aide ! 
            

Answer 1

Pourquoi cela arrive-t-il ?

Je pense donc que la raison pour laquelle cela se produit est que, dans le composant ConditionalRenderComponent, l'élément enfant lui est transmis en tant qu'attribut (comme un paramètre à une fonction). Les expressions JSX sont évaluées comme arguments des fonctions.

Cela signifie que même si condition est fausse, condition为false，children在传递给ConditionalRenderComponent sera toujours évalué avant d'être transmis à la fonction

.

Exemples faciles à comprendre

PlayStation（在你的左手）和数学试卷成绩Vous donnez un

(dans votre main droite) à un enfant et lui dites que s'il obtient plus de 90/100, il obtiendra une PlayStation.

childrenComme l'enfant peut déjà voir la PlayStation dans votre main gauche (passez

comme expression JSX), il l'utilise déjà avant que l'état ne soit vérifié.

childrenMaintenant, si vous serrez le poing, cela équivaut à passer

en fonction, et il/elle ne peut pas évaluer ce qu'il y a dans votre main gauche avant de vérifier si la condition dans votre main droite est vraie.

Solution

children。这样，您可以确保只有在condition为真时才会评估childrenNous modifions notre composant personnalisé en utilisant une fonction comme élément enfant au lieu de le rendre directement dans le composant

. De cette façon, vous vous assurez que

ne sera évalué que si condition est vraie.

Modifications apportées au ConditionalRenderComponent

function ConditionalRenderComponent({ condition, children }) {
  return (
    <div>
      {condition && children()}
    </div>
  );
}

🎜Modifications apportées au rendu ConditionalRenderComponent🎜

<ConditionalRenderComponent condition={isLoggedIn}>
        {() => (
          <div>
            <p>你好，{userData.username}！</p>
            <p>你的电子邮件：{userData.email}</p>
          </div>
        )}
</ConditionalRenderComponent>

Answer 2

Je ne recommande pas de créer un composant pour le rendu conditionnel, mais si vous souhaitez le faire, vous pouvez utiliser le modèle de propriétés de rendu afin que la fonction ne soit appelée que lorsque la condition est vraie. Cela empêche l’expression d’être évaluée immédiatement.

function If({ condition, render }) {
  if (!condition) return null;

  return render();
}

export default function App() {
  const [state, setState] = useState(null);

  useEffect(() => {
    wait(1000).then(() => {
      setState({ hello: "world" });
    });
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>

      <If condition={Boolean(state)} render={() => <p>{state.hello}</p>} />
    </div>
  );
}