<p>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 : </p> <pre class="brush:js;toolbar:false;">importer React depuis 'react'; function ConditionalRenderComponent({ condition, enfants }) { retour ( <div> {état et enfants} </div> ); } exporter le ConditionalRenderComponent par défaut ; ≪/pré> <p>Lors de l'utilisation de ce composant personnalisé, j'ai remarqué que le contenu passait par l'attribut <code>children</code> même lorsque <code>condition</code> consulté et exécuté. Ceci est différent du comportement de l'utilisation de <code>condition && <div></div></code> directement sans composant personnalisé, où la condition est <code>false</code> L'accès au contenu est correctement bloqué. </p> <p><strong>Voici comment j'utilise les composants personnalisés :</strong></p> <pre class="brush:js;toolbar:false;">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 ( <div> <h1>Bienvenue dans mon application</h1> <ConditionalRenderComponent condition={isLoggedIn}> <div> <p>Bonjour, {userData.username} ! </p> <p>Votre e-mail : {userData.email}</p> </div> </ConditionalRenderComponent> {!isLoggedIn && <p>Veuillez vous connecter pour accéder aux données utilisateur. </p>} </div> ); } exporter l'application par défaut ; ≪/pré> <p>Dans l'exemple ci-dessus, <code>userData</code> est initialement <code>null</code> et est ensuite renseigné avec les données récupérées du serveur. La condition <code>isLoggedIn</code> dépend du fait que <code>userData</code> </p> <p>Cependant, même si la condition <code>isLoggedIn</code> est <code>false</code> (avant d'obtenir les données), le contenu de <code>ConditionalRenderComponent</code> pour accéder et afficher <code>userData</code>. Cela entraîne le message d'erreur : "TypeError : Impossible de lire les propriétés de null (lecture de 'nom d'utilisateur')". </p> <p><strong>Comparaison avec le rendu conditionnel standard : </strong></p> <p>Voici une comparaison du comportement en utilisant l'approche standard <code>condition && <pre class="brush:js;toolbar:false;">// Rendu conditionnel standard {isLoggedIn && <div> <p>Bonjour, {userData.username} ! </p> <p>Votre e-mail : {userData.email}</p> </div> )} ≪/pré> <p>Comme indiqué dans le code ci-dessus, l'utilisation de méthodes standard bloque correctement l'accès à la valeur de <code>userData</code> lorsque la condition est <code>false</code>. </p> <p>Je ne sais pas pourquoi cette différence de comportement se produit lors de l'utilisation d'un composant personnalisé avec l'attribut <code>children</code> J'ai essayé de déboguer et de chercher des solutions mais je n'ai pas encore trouvé de réponse claire. </p> <p> 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 <code>children</code> </p> <p>Merci d'avance pour votre aide ! </p>

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

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

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>
  );
}