Wie mache ich eine verschachtelte if else-Anweisung in reactjs JSX?

9

Ich wollte wissen, ob es möglich ist geschachtelt zu werden, wenn sonst in reactjs jsx ?

Ich habe verschiedene Wege ausprobiert und kann es nicht zum Laufen bringen.

Ich suche nach

%Vor%

Ich habe das versucht, aber ich kann es nicht zum Rendern bringen. Ich habe verschiedene Wege ausprobiert. Es bricht immer, wenn ich das verschachtelte if hinzufüge.

%Vor%

Aktualisieren

Ich entschied mich schließlich für die Lösung, um dies in renderContent zu verschieben und die Funktion aufzurufen. Beide Antworten funktionierten jedoch. Ich denke, ich kann die Inline-Lösung verwenden, wenn es für einen einfachen Render-und renderContent für kompliziertere Fälle ist.

Danke

    
ALM 19.05.2016, 00:33
quelle

4 Antworten

9

Sie müssen Ihren Titel und Ihren Körper in einen Container verpacken. Das könnte ein div sein. Wenn Sie stattdessen eine -Liste verwenden, haben Sie im Dom ein Element weniger.

%Vor%

Ich würde davon abraten, ternäre Aussagen zu verschachteln, weil es schwer zu lesen ist. Manchmal ist es eleganter, "früh zurückzukehren", als ein Ternär zu verwenden. Außerdem können Sie isBool && component verwenden, wenn Sie nur den wahren Teil des Ternärs wollen.

%Vor%     
Neal Ehardt 19.05.2016, 01:41
quelle
4

Ihr Code in der Alternative ist kein gültiger JavaScript / JSX-Ausdruck:

%Vor%

Lässt das zu

vereinfachen %Vor%

Dies wirft den Fehler

  

Uncaught SyntaxError: Unerwartete Zahl (...)

Sie können nicht einfach zwei Ausdrücke nebeneinander haben.

Stattdessen müssen Sie einen einzelnen Wert aus dem falschen Zweig des bedingten Operators zurückgeben. Sie können dies tun, indem Sie es einfach in ein anderes JSX-Element einfügen:

%Vor%

Wenn Sie "body" nur anzeigen möchten, wenn "ein anderer Titel" angezeigt wird, müssen Sie <div>body</div> in den falschen Zweig des bedingten Operators verschieben:

%Vor%

Oder vielleicht möchten Sie

%Vor%     
Felix Kling 19.05.2016 00:56
quelle
4

Anstatt ternäre Operatoren zu verschachteln, wie es oft vorgeschlagen wird, oder eine separate Funktion zu erstellen, die nirgendwo anders wiederverwendet wird, können Sie einfach einen Inline-Ausdruck aufrufen:

%Vor%     
dehumanizer 31.03.2017 02:12
quelle
2

Wie die andere Antwort nahelegt, gibt es verschiedene Möglichkeiten, ein verschachteltes zu tun, wenn es anders reagiert. Welche zu verwenden ist, hängt von der Situation und den Vorlieben ab.

Meiner Meinung nach ist es für beste Lesbarkeit des Codes am besten, den Inhalt von else in eine separate Funktion zu verschieben:

%Vor%

Oder wenn es einfach genug ist (falls keine anderen Elemente gerendert werden), würde ich gehen mit:

%Vor%

Hier finden Sie einen Artikel zum bedingten Rendern in React . Wenn Sie sich für weitere Details interessieren, sehen Sie sich das bitte an zu diesem Thema.

    
Nesha Zoric 21.02.2018 09:27
quelle