Gibt es eine bessere Möglichkeit, Conditionals in Jsx zu verwenden?

Question

Ich habe React für die letzten paar Wochen gelernt und eine Sache, die ich nicht mag, ist, dass ich den ternären Operator für wenn sonst innerhalb der Putzfunktion verwenden muss.

Etwas wie: Reagieren

function render() { 
    return (
     {x==="Let's go" ? <Go /> : <Hold on />} 
    ) 
} 

Gibt es eine Weise, die ich ein traditionelles mit jsx Syntax in was das betrifft wechseln if-else oder benutzen kann?

Answer 1

ich ein paar Ansätze nutzen, um die Render-Methode von komplexeren Komponenten zu bereinigen.

1) Verwenden Sie eine Variable. Bevor Sie sich tatsächlich im JSX-Teil (der Rückgabe) befinden, können Sie die Flexibilität von Raw JS nutzen, um Variablen zu erstellen. So nehmen Sie Ihr Beispiel ...

function render() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     <div> 
      {body} 
     </div> 
    ); 
} 

Beachten Sie, dass die oberste Ebene zu verpackenden muss, setzen Sie einfach ein extra div drin.

2) Verwenden Sie eine Funktion. Dieses Beispiel ist wahrscheinlich ein wenig zu einfach, aber Sie bekommen die Idee ..

renderBody() { 
    let body; 
    if (x === "Let's go") { 
     body = <Go /> 
    } else { 
     body = <Hold on />; 
    } 
    return (
     {body} 
    ) 
} 

render() { 
    return (
     <div> 
      {renderBody()} 
     </div> 
    ) 
} 

3) Verwenden Sie ein Array (wirklich eine Teilmenge von # 1), aber oft finde ich Szenarien, in denen manchmal brauche ich 1 Element zurückzukehren aber manchmal muss ich eine variable Anzahl von Elementen zurückgeben. Ich werde ein Array an der Spitze der Funktion erstellen und dann Elemente auf das Array schieben/verschieben. Beachten Sie, dass Sie jedes Mal, wenn Sie ein Array erstellen, einen Schlüssel für jedes Element bereitstellen müssen, damit React es ordnungsgemäß aktualisieren kann.

let els = [ 
    <div key="always">Always here</div> 
]; 
if (foo) { 
    els.push(<div key="ifFoo">Conditionally Here</div>) 
} 

Und dann verwenden Sie einfach die Variable {els} in Ihrem Haupt-JSX.

4) Return null, wenn Sie nicht wollen, etwas

Answer 2

Ich ziehe diese Syntax

function render() { 
    if (x==="Let's go") return <Go />; 
    return <Hold on />; 
}