https://www.solidjs.com/assets/lesson-f48c3bce-CiAPiWj1.js

1import{d as n,$ as s,v as i}from"./jsx-runtime--u0cTjhj.js";import"./index-ZkWeeHR8.js";const c=[];function a(l){const e=Object.assign({p:"p",code:"code",pre:"pre",span:"span"},l.components);return s(i,{children:[s(e.p,{children:["JSX erlaubt es uns, JavaScript zu verwenden, um den logischen Ablauf in einem Template zu kontrollieren. Allerdings führt die naive Nutzung von Methoden wie ",n(e.code,{children:"Array.prototype.map"})," ohne ein virtuelles DOM dazu, dass verschwenderischerweise bei jeder Aktualisierung alle DOM-Nodes neu erstellt werden. Stattdessen ist es in reaktiven Libraries gängig, Template-Helfer zu verwenden. In Solid sind diese in Komponenten verpackt."]}),`
2`,s(e.p,{children:["Der einfachste Kontrollfluss ist die Bedingung. Solids Compiler ist intelligent genug, um ternäre Ausdrücke (",n(e.code,{children:"a ? b : c"}),") und bool'sche Ausdrücke (",n(e.code,{children:"a && b"}),") optimal zu handhaben. Allerdings ist es häufig lesbarer, Solids ",n(e.code,{children:"<Show>"}),"-Komponente zu nutzen."]}),`
3`,n(e.p,{children:"In dem Beispiel soll nur der Knopf gezeigt werden, der dem gegenwärtigen Zustand (ob der Nutzer eingeloggt ist) entspricht. Ändere das JSX zu:"}),`
4`,n(e.pre,{children:s(e.code,{className:"hljs language-jsx",children:["<",n(e.span,{className:"hljs-title class_",children:"Show"}),`
5  when={`,n(e.span,{className:"hljs-title function_",children:"loggedIn"}),`()}
6  fallback={`,n(e.span,{className:"hljs-function",children:"() =>"})," ",s(e.span,{className:"xml",children:[s(e.span,{className:"hljs-tag",children:["<",n(e.span,{className:"hljs-name",children:"button"})," ",n(e.span,{className:"hljs-attr",children:"onClick"}),"=",n(e.span,{className:"hljs-string",children:"{toggle}"}),">"]}),"Log in",s(e.span,{className:"hljs-tag",children:["</",n(e.span,{className:"hljs-name",children:"button"}),">"]})]}),`}
7>
8  `,s(e.span,{className:"xml",children:[s(e.span,{className:"hljs-tag",children:["<",n(e.span,{className:"hljs-name",children:"button"})," ",n(e.span,{className:"hljs-attr",children:"onClick"}),"=",n(e.span,{className:"hljs-string",children:"{toggle}"}),">"]}),"Log out",s(e.span,{className:"hljs-tag",children:["</",n(e.span,{className:"hljs-name",children:"button"}),">"]})]}),`
9</`,n(e.span,{className:"hljs-title class_",children:"Show"}),`>
10`]})}),`
11`,s(e.p,{children:["Das ",n(e.code,{children:"fallback"}),"-Prop fungiert als ",n(e.code,{children:"else"})," und wird angezeigt, wenn die Bedingung, die an ",n(e.code,{children:"when"})," übergeben wird, keinen ",n(e.code,{children:"true"})," entsprechenden Wert enthält."]}),`
12`,n(e.p,{children:"Jetzt wird das Drücken auf den Knopf dessen Zustand wie erwartet ändern."})]})}function d(l={}){const{wrapper:e}=l.components||{};return e?n(e,Object.assign({},l,{children:n(a,l)})):a(l)}export{d as default,c as toc};