Ich habe ein Problem mit dem bedingten Rendering in einer benutzerdefinierten Komponente in meiner React-Anwendung. Ich habe daran gearbeitet, eine benutzerdefinierte Komponente für bedingtes Rendering zu erstellen, die Inhalte nur dann rendert, wenn bestimmte Bedingungen erfüllt sind. Hier ist mein aktueller Code:
import React from 'react'; Funktion ConditionalRenderComponent({ Bedingung, Kinder }) { zurückkehren ( {Bedingung && ); } Export Standard ConditionalRenderComponent; Bei der Verwendung dieser benutzerdefinierten Komponente ist mir aufgefallen, dass der Inhalt auch dann über das Attribut children übergeben wird, wenn condition abgerufen und ausgeführt werden. Dies unterscheidet sich vom Verhalten bei der direkten Verwendung von condition &&
false ist. Der Zugriff auf die Inhalte ist ordnungsgemäß gesperrt. So verwende ich benutzerdefinierte Komponenten:
import React, { useState, useEffect } from 'react'; importiere ConditionalRenderComponent aus './ConditionalRenderComponent'; Funktion App() { const [userData, setUserData] = useState(null); const isLoggedIn = userData !== null; useEffect(() => { setTimeout(() => { setUserData({ Benutzername: 'john_doe', E-Mail: 'john@example.com' }); }, 1000); }, []); zurückkehren ( Willkommen in meiner App
Hallo, {userData.username}!
Ihre E-Mail: {userData.email}
{!isLoggedIn && Bitte melden Sie sich an, um auf Benutzerdaten zuzugreifen.
} ); } Standard-App exportieren; Im obigen Beispiel ist userData zunächst null und wird später mit vom Server abgerufenen Daten gefüllt. Die Bedingung isLoggedIn hängt davon ab, ob userData
Obwohl die Bedingung isLoggedIn lautet (bevor die Daten abgerufen werden), versucht der Inhalt in ConditionalRenderComponent um auf userData zuzugreifen und diese anzuzeigen. Dies führt zu der Fehlermeldung: „TypeError: Eigenschaften von Null können nicht gelesen werden (‚Benutzername‘ wird gelesen)“.
Vergleich zum standardmäßigen bedingten Rendering:
Hier ist ein Vergleich des Verhaltens unter Verwendung des Standardansatzes &&
// Standardbedingtes Rendering {isLoggedIn && ( Hallo, {userData.username}!
Ihre E-Mail: {userData.email}
)} Wie im obigen Code gezeigt, blockiert die Verwendung von Standardmethoden den Zugriff auf den Wert von userData, wenn die Bedingung false ist.
Ich bin mir nicht sicher, warum dieser Verhaltensunterschied auftritt, wenn eine benutzerdefinierte Komponente mit dem Attribut children verwendet wird. Ich habe versucht, Fehler zu beheben und nach Lösungen zu suchen, habe aber noch keine klare Antwort gefunden.
Für Hinweise oder Vorschläge, warum dies passieren könnte und wie die benutzerdefinierte Komponente geändert werden kann, um das erwartete bedingte Rendering-Verhalten für das Attribut children zu erreichen, wären wir sehr dankbar.
Vielen Dank im Voraus für Ihre Hilfe!
为什么会发生这种情况？
所以我认为发生这种情况的原因是，在
ConditionalRenderComponent组件中，子元素被作为属性传递给它（就像函数的参数一样）。JSX表达式被作为函数的参数进行评估。这意味着即使
condition为false，children在传递给ConditionalRenderComponent函数之前仍然会被评估。易于理解的示例
你把一个
PlayStation（在你的左手）和数学试卷成绩（在你的右手）给了一个孩子，并说如果他/她的分数超过90/100，他/她就会得到PlayStation。由于孩子已经可以看到你左手中的PlayStation（将
children作为JSX表达式传递），他/她在检查条件之前就已经开始使用了。现在，如果你握紧你的拳头，相当于将
children作为函数传递，他/她在检查你右手中的条件是否为真之前无法评估左手中的内容。解决方案
我们通过使用一个函数作为子元素来修改我们的自定义组件，而不是直接在组件中渲染
children。这样，您可以确保只有在condition为真时才会评估children。对ConditionalRenderComponent的更改
function ConditionalRenderComponent({ condition, children }) { return ( {condition && children()} ); }对渲染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 ( ); }Hello CodeSandbox
{state.hello}
} />