Villkorlig rendering avser att ändra beteendet hos en app beroende på dess tillstånd. Du kan till exempel ändra hälsningsmeddelandet i din React-app till mörkt under natten. På så sätt har du ett annat displaymeddelande beroende på tid på dygnet.

Villkorlig rendering låter dig rendera olika React-komponenter eller element om ett villkor är uppfyllt. I den här handledningen kommer du att lära dig om de olika sätten du kan använda villkorlig rendering i React.js-applikationer.

Sätt du kan implementera villkorlig rendering

För att följa dessa exempel behöver du ha en grundläggande förståelse för hur React fungerar. Om du har det svårt i det fallet, oroa dig inte – vi har en användbar nybörjarguide till React.js.

Använda villkorliga uttalanden

Precis som i JavaScript kan du använda villkorliga uttalanden som if...else för att skapa element när vissa villkor är uppfyllda.

Du kan till exempel visa ett specificerat element i om blockera när ett villkor är uppfyllt och visa ett annat i annan spärra om villkoret inte är uppfyllt.

Tänk på följande exempel som antingen visar en inloggnings- eller utloggningsknapp beroende på användarens inloggningsstatus.

function Dashboard (rekvisita) {
 const { isLoggedIn } = rekvisita
 if (är inloggad){
 lämna tillbaka Logga ut
 } annat{
 lämna tillbaka Logga in
 }
}

Denna funktion återger en annan knapp beroende på är inloggad värde passerat som en rekvisita.

Relaterad: Hur man använder rekvisita i ReactJS

Alternativt kan du använda den ternära operatorn. Den ternära operatorn tar in ett tillstånd följt av koden för att exekvera om villkoret är det sanning följt av koden som ska köras om villkoret är falskt.

Skriv om ovanstående funktion som:

function Dashboard (rekvisita) {
 const { isLoggedIn } = rekvisita
 lämna tillbaka (
 <>
 {är inloggad?Logga ut:Logga in)
 )
}

Den ternära operatören gör funktionen renare och lättare att läsa jämfört med om annat påstående.

Deklarera elementvariabler

Elementvariabler är variabler som kan innehålla JSX-element och renderas vid behov i en React-app.

Du kan använda elementvariabler för att endast återge en viss del av komponenten när din applikation uppfyller det angivna villkoret.

Till exempel, om du bara vill rendera en inloggningsknapp när användaren inte är inloggad och en utloggningsknapp endast när de är inloggade, kan du använda elementvariabler.

function LoginBtn (rekvisita) {
 lämna tillbaka (

 Logga in

 );
}
function LogoutBtn (rekvisita) {
 lämna tillbaka (

 Logga ut

 );
}
function Dashboard() {
 const [loggedIn, setLoggedIn] = useState (true)
 const handleLogin = () => {
 setLoggedIn (true)
 }
 const handleLogout = () => {
 setLoggedIn (false)
 }
 låt knapp;
 if (inloggad) {
 knapp = 
 } annat {
 knapp = 
 }
 lämna tillbaka (
 <>
 {inloggad}
 )
}

I koden ovan skapade du först inloggnings- och logga ut-knappkomponenterna och definierar sedan komponent för att återge var och en av dem på olika villkor.

I den här komponenten, använd React state hook för att hålla reda på när användaren är inloggad.

Relaterad: Bemästra dina reaktionsfärdigheter genom att lära dig dessa ytterligare krokar

Nu, beroende på staten antingen göra eller komponent.

Om användaren inte är inloggad, rendera komponent gör annars the komponent. De två handtagsfunktionerna ändrar inloggningsstatus när respektive knapp klickas.

Använda logiska operatorer

Du kan använda logisk && operatör för att villkorligt återge ett element. Här återges ett element endast om villkoret utvärderas till sant, annars ignoreras det.

Om du vill meddela en användare om antalet aviseringar de har endast när de har en eller flera aviseringar, kan du använda följande.

function ShowNotifications (rekvisita) {
 const { notifications } = rekvisita
 lämna tillbaka (
 <>
 {notifications.length > 0 &&

 Du har {notifications.length} aviseringar.


 }
 )
}

Därefter, för att rendera ett element om det logiska &&-uttrycket evalueras till ett falskt värde, kedja den logiska || operatör.

Följande funktion visar meddelandet "Du har inga aviseringar" om inga meddelanden skickas som rekvisita.

function ShowNotifications (rekvisita) {
 const { notifications } = rekvisita
 lämna tillbaka (
 <>
 {notifications.length > 0 &&

 Du har {notifications.length} aviseringar.
 || 
Du har inga aviseringar

 }
 )
}

Förhindra att en komponent renderas

För att dölja en komponent trots att den renderats av en annan komponent, returnera null istället för dess utdata.

Tänk på följande komponent som bara återger en varningsknapp om ett varningsmeddelande skickas som rekvisita.

funktion Varning (rekvisita) {
 const {warningMessage} = rekvisita
 if (!warningMessage) {
 returnera null
 }
 lämna tillbaka (
 <>
Varning
 )
}

Nu, om du skickar in 'warningMessage' till komponent, kommer en varningsknapp att visas. Men om du inte gör det, kommer att returnera null och knappen kommer inte att visas.

 // varningsknappen återges
 // varningsknappen återges inte

Exempel på villkorlig rendering i Real-Life React-applikationer

Använd villkorlig rendering för att utföra olika uppgifter i din applikation. Några av dessa inkluderar rendering av API-data endast när den är tillgänglig och visning av ett felmeddelande endast när ett fel finns.

Rendering av data hämtade från ett API i React

Att hämta data från ett API kan ta ett tag. Kontrollera därför först om det är tillgängligt innan du använder det i din applikation, annars kommer React att skicka ett felmeddelande om det inte är tillgängligt.

Följande funktion visar hur du kan villkorligt rendera data som returneras av ett API.

function FetchData() {
 const [data, setData] = useState (null);
 const apiURL = " https://api.nasa.gov/planetary/apod? api_key=DEMO_KEY";
 // Hämta data från API med Axios
 const fetchData = async () => {
 const response = invänta axios.get (apiURL)
 // Uppdatera tillstånd med data
 setData (response.data) 
 }
 lämna tillbaka (
 <>
Dagens astronomibild

 {
 data && 
{data.title}

{data.explanation}

 }
 )
}

I ovanstående funktion, hämta data från NASA Apod API använder Axios. När API: et returnerar ett svar, uppdatera tillståndet och använd logisk &&-operator för att endast återge data när den är tillgänglig.

Relaterad: Hur man konsumerar API: er i React med hjälp av Fetch och Axios

Visar felmeddelanden

I fall där du bara vill visa ett fel när det finns, använd villkorlig rendering.

Om du till exempel skapar ett formulär och vill visa ett felmeddelande om en användare skrev i fel e-postformat, uppdatera tillståndet med felmeddelandet och använd en if-sats för att återge den.

function showError() {
 const [error, setError] = useState (null)
 lämna tillbaka (
 <>
 {
 if (fel) {
Ett fel inträffade: {error}

 }
 }
 )
}

Välja vad som ska användas i din React-app

I den här handledningen lärde du dig om flera sätt som kan villkorligt rendera JSX-element.

Alla metoder som diskuteras ger samma resultat. Gör ett val om vad du ska använda beroende på användningsfallet och nivån av läsbarhet du vill uppnå.

De 7 bästa gratis handledningarna för att lära sig Reagera och göra webbappar

Gratiskurser är sällan lika omfattande och hjälpsamma -- men vi har hittat flera React-kurser som är utmärkta och som hjälper dig att komma igång på rätt fot.

Läs Nästa

Om författaren