Ich habe eine React-Komponente und innerhalb der render
Methode der Komponente habe ich ungefähr Folgendes:
render() {
return (
<div>
<div>
// removed for brevity
</div>
{ switch(...) {} }
<div>
// removed for brevity
</div>
</div>
);
}
Jetzt geht es darum, dass ich zwei div
Elemente habe, eines oben und eines unten, die fest sind. In der Mitte möchte ich eine switch-Anweisung haben und gemäß einem Wert in meinem Status möchte ich eine andere Komponente rendern. Grundsätzlich möchte ich, dass die beiden div
Elemente immer fixiert werden und nur in der Mitte jedes Mal eine andere Komponente gerendert wird. Ich verwende dies, um ein mehrstufiges Zahlungsverfahren zu implementieren. Obwohl der Code derzeit nicht funktioniert, funktioniert er nicht, da ich einen Fehler bekomme, der besagt, dass dies switch
unerwartet ist. Irgendwelche Ideen, wie ich das erreichen kann, was ich will?
return
Anweisung oder sogar derrender
Methode für diese Angelegenheit haben. Könnten Sie jede<div>
als Konstante definieren und dann dieswitch
vor Ihrer verwendenreturn
, um zu bestimmen, welche<div>
gerendert werden soll?div
das oben und unten mehrmals für jeden Fall des wiederholenswitch
. Oder ich habe es einfach falsch verstanden, Sie ..let middleDiv = ...
und dann{middleDiv}
zwischen den beiden<div>
s, die Sie dort fest codiert haben, in Ihre Rückgabe aufnehmen .Antworten:
Versuchen Sie dies, was auch viel sauberer ist: Nehmen Sie diesen Schalter in einer Funktion aus dem Render heraus und rufen Sie ihn einfach auf, indem Sie die gewünschten Parameter übergeben. Beispielsweise:
quelle
Im Gegensatz zu anderen Antworten würde ich es vorziehen, den "Schalter" in der Renderfunktion einzubinden. Dadurch wird klarer, welche Komponenten an dieser Position gerendert werden können. Sie können einen switch-ähnlichen Ausdruck implementieren, indem Sie ein einfaches altes Javascript-Objekt verwenden:
quelle
<SearchResults />
oder<NoResults />
. Wenn der Ansichtsstatus gerendert werden soll,<NoResults />
wird er<SearchResults />
möglicherweise nicht kompiliert, da er von Eigenschaften abhängt, die noch nicht vorhanden sind.||
Folgendes:{ 'foo': <Foo />, 'bar': <Bar /> }[param] || <Baz />
Das passiert, weil
switch
Anweisung eine iststatement
, aber hier erwartet Javascript einen Ausdruck.Obwohl es nicht empfohlen wird, die switch-Anweisung in einer
render
Methode zu verwenden, können Sie die selbstaufrufende Funktion verwenden, um dies zu erreichen:quelle
Ich habe dies innerhalb der render () -Methode getan:
Ich habe versucht, die Rückgabe von render () sauber zu halten, also habe ich meine Logik in eine 'const'-Funktion direkt darüber eingefügt. Auf diese Weise kann ich auch meine Schaltergehäuse sauber einrücken.
quelle
head()
Methode meinerreact-helmet
Eine Möglichkeit, eine Art Schalter in einem Renderblock mithilfe von bedingten Operatoren darzustellen :
Es sollte sichergestellt werden, dass die Bedingungen strikt einen Booleschen Wert zurückgeben.
quelle
lenkans antwort ist eine großartige lösung.
Wenn Sie einen Standardwert benötigen, können Sie dies sogar tun
Wenn Ihnen das nicht gut gefällt, können Sie alternativ so etwas tun
mit
quelle
Ich bin kein großer Fan einer der aktuellen Antworten, weil sie entweder zu ausführlich sind oder Sie den Code durchspringen müssen, um zu verstehen, was los ist. Warum nicht stattdessen eine wirklich einfache Switch-Komponente erstellen, die basierend auf einem Requisitentest bedingt gerendert wird? Beispielsweise:
Sie können den Wechsel so einfach oder so komplex gestalten, wie Sie möchten. Vergessen Sie nicht, die Kinder und ihre Wertschöpfungen genauer zu überprüfen.
quelle
javascript const Switch = props => { const { test, children } = props; return children.find(child => { return child.props.value === test; }); }; const Case = ({ children, value }) => { return children; // I don't want do add container around my cases ! };
diese Weise können Sie schreiben:javascript <Switch test={true}> <Case value={true}> <ItAlwaysFeelsRightToBeTrue /> </Case> <Case value={false}> <FalseAlarm /> </Case> </Switch>
Wie wäre es mit:
quelle
Sie können so etwas tun.
quelle
Sie können keinen Schalter im Render haben. Der Pseudo-Switch-Ansatz, ein Objektliteral zu platzieren, das auf ein Element zugreift, ist nicht ideal, da alle Ansichten verarbeitet werden und dies zu Abhängigkeitsfehlern von Requisiten führen kann, die in diesem Zustand nicht vorhanden sind.
Hier ist eine schöne, saubere Methode, bei der nicht jede Ansicht im Voraus gerendert werden muss:
Wenn Ihre Bedingungen, für die der Ansichtsstatus verwendet wird, auf mehr als einer einfachen Eigenschaft basieren - wie mehrere Bedingungen pro Zeile -, sind eine Aufzählung und eine
getViewState
Funktion zum Kapselen der Bedingungen eine gute Möglichkeit, diese bedingte Logik zu trennen und Ihr Rendering zu bereinigen.quelle
Hier ist ein voll funktionsfähiges Beispiel mit einer Schaltfläche zum Wechseln zwischen Komponenten
Sie können einen Konstruktor wie folgt festlegen
Anschließend können Sie Komponenten wie folgt rendern
}}
Wie Sie sehen können, benutze ich eine Taste, um zwischen den Zuständen zu wechseln.
quelle
Dies ist ein anderer Ansatz.
quelle
Der Vorschlag in https://stackoverflow.com/a/60313570/770134 hat mir sehr gut gefallen , daher habe ich ihn wie folgt an Typescript angepasst
quelle