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
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.
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:
Oder vielleicht möchten Sie
%Vor%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%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.
Tags und Links javascript reactjs ecmascript-6 jsx