Maison > Questions et réponses > le corps du texte
P粉5338986942023-08-19 15:04:37
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
PlayStation
(在你的左手)和数学试卷成绩
Vous donnez un
children
Comme l'enfant peut déjà voir la PlayStation dans votre main gauche (passez
children
Maintenant, si vous serrez le poing, cela équivaut à passer
children
。这样,您可以确保只有在condition
为真时才会评估children
Nous modifions notre composant personnalisé en utilisant une fonction comme élément enfant au lieu de le rendre directement dans le composant
condition
est vraie. 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>
P粉5433443812023-08-19 13:02:01
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> ); }