{"id":62052,"date":"2023-05-26T11:04:48","date_gmt":"2023-05-26T10:04:48","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=62052&preview=true&preview_id=62052"},"modified":"2023-08-23T11:01:38","modified_gmt":"2023-08-23T10:01:38","slug":"react-bedingtes-rendering","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/","title":{"rendered":"React bedingtes Rendering beherrschen: Ein Tiefgang"},"content":{"rendered":"

Bedingtes Rendering ist eine leistungsstarke Funktion in React, die es Entwicklern erm\u00f6glicht, Komponenten basierend auf bestimmten Bedingungen zu rendern.<\/p>\n

Es ist ein grundlegendes Konzept, das bei der Entwicklung dynamischer und interaktiver Webanwendungen eine wichtige Rolle spielt.<\/p>\n

In diesem umfassenden Leitfaden tauchen wir tief in das bedingte Rendering in React ein und erl\u00e4utern grundlegende und fortgeschrittene Techniken anhand von Beispielen, damit du sie richtig verstehst.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Das bedingte Rendering in React verstehen<\/h2>\n

Das bedingte Rendering in React<\/a> erm\u00f6glicht es Entwicklern, dynamisch zu steuern, welche Inhalte auf dem Bildschirm angezeigt werden, und zwar auf der Grundlage bestimmter Werte, die in einer Variablen, einem Status oder einer Requisite gespeichert werden k\u00f6nnen.<\/p>\n

Das kann sehr n\u00fctzlich sein, wenn du bestimmte UI-Elemente ein- oder ausblenden, das Layout einer Seite \u00e4ndern oder verschiedene Inhalte auf Basis von Benutzerinteraktionen darstellen willst.<\/p>\n

Das bedingte Rendering ist in React-Anwendungen wichtig, weil es dir erm\u00f6glicht, dynamische und interaktive Benutzeroberfl\u00e4chen zu erstellen, die in Echtzeit auf ver\u00e4nderte Daten und Benutzerinteraktionen reagieren k\u00f6nnen.<\/p>\n

Es tr\u00e4gt dazu bei, die Leistung<\/a> und Effizienz deiner Anwendungen zu verbessern, indem es das unn\u00f6tige Rendering von Komponenten oder Elementen, die nicht ben\u00f6tigt werden, vermeidet.<\/p>\n\n

Grundlegende Techniken f\u00fcr bedingtes Rendering<\/h2>\n

Es gibt mehrere grundlegende Techniken, die du f\u00fcr das bedingte Rendering in React verwenden kannst. Lass uns jede von ihnen im Detail untersuchen.<\/p>\n

Verwendung der if-Anweisung f\u00fcr bedingtes Rendering<\/h3>\n

Eine der einfachsten M\u00f6glichkeiten, das bedingte Rendering in React zu implementieren, ist die Verwendung der traditionellen if<\/code> Anweisung.<\/p>\n

if (condition) {\n    return <p>Expression 1<\/p>;\n  } else {\n    return <p>Expression 2<\/p>;\n  }<\/code><\/pre>\n
Die JavaScript-Anweisung if<\/code> kann in der Methode render()<\/code> deiner Komponente verwendet werden, um Inhalte abh\u00e4ngig von einer bestimmten Bedingung zu rendern.<\/p>\n
Du kannst die if-Anweisung zum Beispiel verwenden, um einen Lade-Spinner anzuzeigen, w\u00e4hrend du darauf wartest, dass Daten geladen werden:<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst MyComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    \/\/ Fetch data from an API\n    fetch('https:\/\/example.com\/data')\n      .then((response) => response.json())\n      .then((data) => {\n        setData(data);\n        setIsLoading(false);\n      });\n  }, []);\n\n  if (isLoading) {\n    return <Spinner \/>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In diesem Beispiel holt MyComponent<\/code> mit dem Hook useEffect<\/code> Daten von einer API ab. W\u00e4hrend wir darauf warten, dass die Daten geladen werden, zeigen wir mit der Anweisung if<\/code> eine Spinner-Komponente an.<\/p>\n
Ein anderes Beispiel ist das Rendern einer Fallback-UI, wenn beim Rendern deiner Komponente ein Fehler auftritt:<\/p>\n
const MyComponent = ({ data }) => {\n  if (!data) {\n    return <p>Something went wrong. Please try again later.<\/p>;\n  }\n\n  return <div>{\/* Render the data here *\/}<\/div>;\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In diesem Code haben wir eine MyComponent<\/code>, die eine data<\/code> Anweisung annimmt. Wenn die Requisite data<\/code> fehlerhaft ist, wird mit der Anweisung if<\/code> eine Fehlermeldung angezeigt.<\/p>\n
Schlie\u00dflich kannst du mit der Anweisung if<\/code> unterschiedliche Inhalte f\u00fcr verschiedene Benutzerrollen anzeigen:<\/p>\n
const MyComponent = ({ user }) => {\n  if (user.role === 'admin') {\n    return <p>Welcome, admin!<\/p>;\n  } else if (user.role === 'user') {\n    return <p>Welcome, user!<\/p>;\n  } else {\n    return <p>You are not authorized to access this page.<\/p>;\n  }\n};\n\nexport default MyComponent;<\/code><\/pre>\n
In diesem Code haben wir eine MyComponent<\/code>, die eine user<\/code> -Anweisung ben\u00f6tigt. Abh\u00e4ngig von der Eigenschaft user.role<\/code> zeigen wir mit der Anweisung if<\/code> unterschiedliche Inhalte an.<\/p>\n
Verwendung des tern\u00e4ren Operators f\u00fcr bedingtes Rendering<\/h3>\n
Eine weitere M\u00f6glichkeit, bedingtes Rendering in React zu implementieren, ist die Verwendung des tern\u00e4ren Operators in JSX.<\/p>\n
Mit dem tern\u00e4ren Operator kannst du eine kompakte Inline if-else-Anweisung schreiben, indem du 3 Operanden angibst. Der erste Operand ist die Bedingung, w\u00e4hrend die beiden anderen Operanden die Ausdr\u00fccke sind. Wenn die Bedingung true<\/code> lautet, wird der erste Ausdruck ausgef\u00fchrt, andernfalls der zweite Ausdruck.<\/p>\n
Du kannst zum Beispiel verschiedene Komponenten auf der Grundlage einer Requisite darstellen:<\/p>\n
import ComponentA from '.\/ComponentA';\nimport ComponentB from '.\/ComponentB';\n\nconst ExampleComponent = ({ shouldRenderComponentA }) => {\n  return (\n    <div>\n      {shouldRenderComponentA ? <ComponentA \/> : <ComponentB \/>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In diesem Code haben wir eine ExampleComponent<\/code>, die eine Requisite namens shouldRenderComponentA<\/code> annimmt. Wir verwenden den tern\u00e4ren Operator, um abh\u00e4ngig vom Prop-Wert entweder ComponentA<\/code> oder ComponentB<\/code> darzustellen.<\/p>\n
Du kannst auch einen anderen Text basierend auf einem Zustand darstellen:<\/p>\n
import { useState } from 'react';\n\nconst ExampleComponent = () => {\n  const [showMessage, setShowMessage] = useState(false);\n\n  return (\n    <div>\n      <button onClick={() => setShowMessage(!showMessage)}>\n        {showMessage ? 'Hide message' : 'Show message'}\n      <\/button>\n      {showMessage ? <p>Hello, world!<\/p> : null}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In diesem Beispiel verwenden wir den tern\u00e4ren Operator, um abh\u00e4ngig vom Wert des Zustands showMessage<\/code> einen anderen Text darzustellen. Wenn du auf die Schaltfl\u00e4che klickst, wird der Wert von showMessage<\/code> umgeschaltet und der Text entsprechend angezeigt oder ausgeblendet.<\/p>\n
Schlie\u00dflich kannst du einen Lade-Spinner darstellen, w\u00e4hrend die Daten abgerufen werden:<\/p>\n
import { useState, useEffect } from 'react';\nimport Spinner from '.\/Spinner';\n\nconst ExampleComponent = () => {\n  const [isLoading, setIsLoading] = useState(true);\n  const [data, setData] = useState(null);\n\n  useEffect(() => {\n    const fetchData = async () => {\n      const response = await fetch('https:\/\/jsonplaceholder.typicode.com\/todos\/1');\n      const jsonData = await response.json();\n      setData(jsonData);\n      setIsLoading(false);\n    };\n    fetchData();\n  }, []);\n\n  return (\n    <div>\n      {isLoading ? <Spinner \/> : <p>{data.title}<\/p>}\n    <\/div>\n  );\n};\n\nexport default ExampleComponent;<\/code><\/pre>\n
In diesem Beispiel verwenden wir den tern\u00e4ren Operator, um einen Lade-Spinner anzuzeigen, w\u00e4hrend Daten von einer API abgerufen werden. Sobald die Daten verf\u00fcgbar sind, wird die Eigenschaft title<\/code> mithilfe des tern\u00e4ren Operators dargestellt.<\/p>\n
Logische AND- und OR-Operatoren f\u00fcr bedingtes Rendering verwenden<\/h3>\n
Du kannst auch die logischen Operatoren AND (&&<\/code>) und OR (||<\/code>) verwenden, um ein bedingtes Rendering in React zu implementieren.<\/p>\n
Der logische AND-Operator erm\u00f6glicht es dir, eine Komponente nur dann zu rendern, wenn eine bestimmte Bedingung erf\u00fcllt ist, w\u00e4hrend der logische OR-Operator es dir erm\u00f6glicht, eine Komponente zu rendern, wenn eine der beiden Bedingungen erf\u00fcllt ist.<\/p>\n
Diese Operatoren sind n\u00fctzlich, wenn du einfache Bedingungen hast, die bestimmen, ob eine Komponente gerendert werden soll oder nicht. Wenn du zum Beispiel eine Schaltfl\u00e4che nur darstellen willst, wenn ein Formular g\u00fcltig ist, kannst du den logischen UND-Operator wie folgt verwenden:<\/p>\n
import { useState } from 'react';\n\nconst FormComponent = () => {\n  const [formValues, setFormValues] = useState({ username: \"\", password: \"\" });\n\n  const isFormValid = formValues.username && formValues.password;\n\n  const handleSubmit = (event) => {\n    event.preventDefault();\n    \/\/ Submit form data\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input\n        type=\"text\"\n        value={formValues.username}\n        placeholder=\"Type Username...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, username: e.target.value })\n        }\n      \/>\n      <br \/>\n      <input\n        type=\"password\"\n        value={formValues.password}\n        placeholder=\"Type Password...\"\n        onChange={(e) =>\n          setFormValues({ ...formValues, password: e.target.value })\n        }\n      \/>\n      {isFormValid && <button type=\"submit\">Submit<\/button>}\n    <\/form>\n  );\n};\n\nexport default FormComponent;<\/code><\/pre>\n
In diesem Beispiel haben wir ein FormComponent<\/code>, das ein Formular mit zwei Eingabefeldern f\u00fcr username<\/code> und password<\/code> enth\u00e4lt. Wir verwenden den Hook useState<\/code>, um die Formularwerte zu verwalten, und die Variable isFormValid<\/code>, um zu pr\u00fcfen, ob beide Eingabefelder Werte enthalten. Mit dem logischen UND-Operator (&&) wird der Submit-Button nur angezeigt, wenn isFormValid<\/code> wahr ist. Dadurch wird sichergestellt, dass die Schaltfl\u00e4che nur aktiviert wird, wenn das Formular g\u00fcltig ist.<\/p>\n
In \u00e4hnlicher Weise kannst du den OR-Operator verwenden, um eine Lademeldung auszugeben, wenn die Daten noch geladen werden, oder eine Fehlermeldung, wenn ein Fehler auftritt:<\/p>\n
import React, { useEffect, useState } from 'react';\n\nconst DataComponent = () => {\n  const [data, setData] = useState(null);\n  const [isLoading, setIsLoading] = useState(true);\n  const [errorMessage, setErrorMessage] = useState('');\n\n  useEffect(() => {\n    const fetchData = async () => {\n      try {\n        const response = await fetch('https:\/\/api.example.com\/data');\n        const data = await response.json();\n        setData(data);\n      } catch (error) {\n        setErrorMessage('An error occurred while fetching data.');\n      } finally {\n        setIsLoading(false);\n      }\n    };\n\n    fetchData();\n  }, []);\n\n  return (\n    <>\n      {errorMessage || isLoading ? (\n        <p>{errorMessage || 'Loading...'}<\/p>\n      ) : (\n        <ul>\n          {data.map((item) => (\n            <li key={item.id}>{item.name}<\/li>\n          ))}\n        <\/ul>\n      )}\n    <\/>\n  );\n};\n\nexport default DataComponent;<\/code><\/pre>\n
In diesem Beispiel holt DataComponent<\/code> mit fetch Daten von einer API ab und zeigt sie in einer Liste an. Wir verwenden den useState<\/code> Hook, um die Daten, den Ladezustand und die Fehlermeldung zu verwalten. Mit dem logischen ODER-Operator (||) k\u00f6nnen wir eine Lade- oder eine Fehlermeldung anzeigen, wenn eine der beiden Bedingungen erf\u00fcllt ist. So wird sichergestellt, dass der Nutzer eine Meldung sieht, die den aktuellen Stand des Datenabrufs anzeigt.<\/p>\n
Die Verwendung der logischen Operatoren AND und OR f\u00fcr das bedingte Rendering in React ist eine \u00fcbersichtliche und lesbare Methode, um einfache Bedingungen zu behandeln. F\u00fcr komplexere Logik ist es jedoch besser, andere Ans\u00e4tze wie die switch<\/code> Anweisungen zu verwenden.<\/p>\n
Fortgeschrittene Techniken f\u00fcr bedingtes Rendering<\/h2>\n
Das bedingte Rendering in React kann je nach den Anforderungen deiner Anwendung komplexer sein. Hier sind einige fortgeschrittene Techniken, die du f\u00fcr das bedingte Rendering in komplexeren Szenarien verwenden kannst.<\/p>\n
Verwendung von Switch-Anweisungen f\u00fcr bedingtes Rendering<\/h3>\n
W\u00e4hrend if-Anweisungen und tern\u00e4re Operatoren g\u00e4ngige Ans\u00e4tze f\u00fcr das bedingte Rendering sind, kann manchmal eine switch<\/code> Anweisung besser geeignet sein, vor allem wenn es um mehrere Bedingungen geht.<\/p>\n
Hier ist ein Beispiel:<\/p>\n
import React from 'react';\nconst MyComponent = ({ userType }) => {\n  switch (userType) {\n    case 'admin':\n      return <p>Welcome, admin user!<\/p>;\n    case 'user':\n      return <p>Welcome, regular user!<\/p>;\n    default:\n      return <p>Please log in to continue.<\/p>;\n  }\n};\nexport default MyComponent;<\/code><\/pre>\n
In diesem Code wird eine switch<\/code> Anweisung verwendet, um Inhalte auf der Grundlage der userType<\/code> Requisite bedingt darzustellen. Dieser Ansatz kann hilfreich sein, wenn es um mehrere Bedingungen geht, und bietet eine \u00fcbersichtlichere und besser lesbare M\u00f6glichkeit, komplexe Logik zu handhaben.<\/p>\n
Bedingtes Rendering mit React Router<\/h3>\n
React Router ist eine beliebte Library f\u00fcr das clientseitige Routing in React-Anwendungen. Mit React Router kannst du Komponenten basierend auf der aktuellen Route bedingt rendern.<\/p>\n
Hier ist ein Beispiel f\u00fcr die Implementierung von bedingtem Rendering mit React Router:<\/p>\n
import { useState } from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n\nimport Home from '.\/components\/Home';\nimport Login from '.\/components\/Login';\nimport Dashboard from '.\/components\/Dashboard';\nimport NotFound from '.\/components\/NotFound';\n\nconst App = () => {\n  const [isLoggedIn, setIsLoggedIn] = useState(false);\n\n  return (\n    <Router>\n      <Switch>\n        <Route exact path=\"\/\" component={Home} \/>\n        <Route path=\"\/login\">\n          <Login setIsLoggedIn={setIsLoggedIn} \/>\n        <\/Route>\n        {isLoggedIn ? (\n          <Route path=\"\/dashboard\" component={Dashboard} \/>\n        ) : (\n          <Route component={NotFound} \/>\n        )}\n      <\/Switch>\n    <\/Router>\n  );\n};\n\nexport default App;<\/code><\/pre>\n
In diesem Code verwenden wir den Status isLoggedIn<\/code>, um entweder die Komponente Dashboard<\/code> zu rendern, wenn der Nutzer eingeloggt ist, oder die Komponente NotFound<\/code>, wenn der Nutzer nicht eingeloggt ist. Die Komponente Login<\/code> setzt den Status isLoggedIn<\/code> auf true<\/code>, sobald sich der Nutzer erfolgreich angemeldet hat.<\/p>\n
Beachte, dass wir die Requisiten der Komponente <Route><\/code> verwenden, um die Komponente Login<\/code> und die Funktion setIsLoggedIn<\/code> zu \u00fcbergeben. So k\u00f6nnen wir Requisiten an die Komponente Login<\/code> \u00fcbergeben, ohne sie in der Requisite path<\/code> anzugeben.<\/p>\n\n
Zusammenfassung<\/h2>\n
Das bedingte Rendering ist eine leistungsstarke Technik in React, mit der du die Benutzeroberfl\u00e4che dynamisch auf der Grundlage verschiedener Bedingungen aktualisieren kannst.<\/p>\n
Je nachdem, wie komplex die UI-Logik deiner Anwendung ist, kannst du den Ansatz w\u00e4hlen, der am besten zu deinen Bed\u00fcrfnissen passt.<\/p>\n
Denke daran, deinen Code sauber, \u00fcbersichtlich und lesbar zu halten, und teste deine bedingte Rendering-Logik immer gr\u00fcndlich, um sicherzustellen, dass sie in verschiedenen Szenarien wie erwartet funktioniert.<\/p>\n
Suchst du nach der idealen Hosting-L\u00f6sung f\u00fcr deine React-Anwendungen? Teste das Anwendungs-Hosting von Kinsta<\/a> kostenlos!<\/p>\n","protected":false},"excerpt":{"rendered":"
Bedingtes Rendering ist eine leistungsstarke Funktion in React, die es Entwicklern erm\u00f6glicht, Komponenten basierend auf bestimmten Bedingungen zu rendern. Es ist ein grundlegendes Konzept, das bei …<\/p>\n","protected":false},"author":287,"featured_media":62053,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[975],"class_list":["post-62052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-react"],"yoast_head":"\nReact bedingtes Rendering meistern: Ein Tiefgang - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React bedingtes Rendering beherrschen: Ein Tiefgang\" \/>\n<meta property=\"og:description\" content=\"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-26T10:04:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T10:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"9\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"React bedingtes Rendering beherrschen: Ein Tiefgang\",\"datePublished\":\"2023-05-26T10:04:48+00:00\",\"dateModified\":\"2023-08-23T10:01:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\"},\"wordCount\":1326,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\",\"name\":\"React bedingtes Rendering meistern: Ein Tiefgang - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg\",\"datePublished\":\"2023-05-26T10:04:48+00:00\",\"dateModified\":\"2023-08-23T10:01:38+00:00\",\"description\":\"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React\",\"item\":\"https:\/\/kinsta.com\/de\/thema\/react\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React bedingtes Rendering beherrschen: Ein Tiefgang\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/de\/#website\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React bedingtes Rendering meistern: Ein Tiefgang - Kinsta\u00ae","description":"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/","og_locale":"de_DE","og_type":"article","og_title":"React bedingtes Rendering beherrschen: Ein Tiefgang","og_description":"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.","og_url":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2023-05-26T10:04:48+00:00","article_modified_time":"2023-08-23T10:01:38+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.","twitter_image":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"9\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"React bedingtes Rendering beherrschen: Ein Tiefgang","datePublished":"2023-05-26T10:04:48+00:00","dateModified":"2023-08-23T10:01:38+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/"},"wordCount":1326,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/","url":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/","name":"React bedingtes Rendering meistern: Ein Tiefgang - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg","datePublished":"2023-05-26T10:04:48+00:00","dateModified":"2023-08-23T10:01:38+00:00","description":"Lerne, wie das bedingte Rendering in React funktioniert und bringe deine Webentwicklungsf\u00e4higkeiten mit unserem umfassenden Leitfaden auf das n\u00e4chste Level.","breadcrumb":{"@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#primaryimage","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/05\/react-conditional-render.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/de\/blog\/react-bedingtes-rendering\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"React","item":"https:\/\/kinsta.com\/de\/thema\/react\/"},{"@type":"ListItem","position":3,"name":"React bedingtes Rendering beherrschen: Ein Tiefgang"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/de\/#website","url":"https:\/\/kinsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/comments?post=62052"}],"version-history":[{"count":7,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62052\/revisions"}],"predecessor-version":[{"id":62402,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/posts\/62052\/revisions\/62402"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/translations\/es"},{"href":"https:\/\/kinsta.com\/de\/wp-json\/kinsta\/v1\/posts\/62052\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media\/62053"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/media?parent=62052"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/tags?post=62052"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/de\/wp-json\/wp\/v2\/topic?post=62052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}