Conditional-Rendering in reagieren js (Zustand innerhalb einer mehr Bedingung)

Question

Eigentlich versuche ich, verstecken und zeigen einige HTML-Elemente in reagieren. Ich habe ein Mitarbeiterformular erstellt, in dem wir mehrere Partitionen haben, zum Beispiel persönliche Informationen, Kontaktinformationen etc ... Ich erstellte nächste und vorherige Schaltflächen in Form zum Anzeigen und Ausblenden anderer Partitionen im Formular Es gibt eine Partition in der Wir haben Bildungsdetails zu füllen, also entschied ich mich, eine Plus-und Minus-Taste zu halten, um Bildungsdetails mit Bedingungen hinzuzufügen.

But finally, my problem is like i have complex conditions on **render** function: 

{someCondition && <div> 
{anotherCondition && <div></div>} 
</div>} 

But, i'm getting: *Adjacent JSX elements must be wrapped in an enclosing tag error*. So, what i'm supposed to do? 

Answer 1

Aus dem Code, den Sie gab, glaube ich Ihnen eine umschließende Tag wie folgt benötigen:

//div wraps everything else so the component can render. 
<div> 
{someCondition && <div> 
{anotherCondition && <div></div> 
</div>} 
</div> 

Answer 2

Sie müssen sie in einem Div zuerst wickeln. Außerdem sieht Ihre Syntax ein wenig falsch aus (Sie haben eine schließende } verpasst).

{someCondition && (
    <div> 
    {anotherCondition && <div></div>} 
    </div> 
)} 

Answer 3

Sie müssen immer ein einzelnes Element händigt die übrigen umschließt.

Wie in Bezug auf bedingtes Rendering, hier einige weitere Tipps sind, können Sie betrachten:

A. für einfache Bedingungen ist ternärer Operator sauber genug:

return condition ? <p>abc</p> : <p>def</p> 

B. Rendering-Funktionen für sauberere Code erstellen oder kompliziertere if-else

renderButton =() => { 
    if (isLoading) { return false } 
    if (something) { 
    return <div></div> 
    } else { 
    return <div></div> 
    } 
} 

render() { 
    return (
    <div> 
     { this.renderButton } 
    </div> 
) 
} 

C. gleiche wie oben, aber ohne neue Funktionen erstellen:

render() { 
    return (
    <div> 
    { 
     (()=>{ 
     if (something) { 
      return <div></div> 
     } else { 
      return <div></div> 
     } 
     })() 
    } 
    </div> 
) 
}