So wechseln Sie die Klasse in der verschachtelten Komponente in ReactJs

Question

Ich habe ein solches Render () -Methode in meiner Wurzelkomponente:

generasacodicetagpre.

Wenn ich die aktive 'Klasse zwischen Fragea- und Frageb-Komponenten umschalten möchte, wenn der Benutzer auf die Schaltfläche geklickt hat.Wie kann ich das machen?Beachten Sie, dass Fragea und Frageb in ihren Render () -Methoden ihre eigenen Klassennamen eingestellt werden.Zum Beispiel Frageb-Render ():

generasacodicetagpre.

Answer 1

Es gibt ein paar Möglichkeiten, mit denen Sie damit umgehen könnten.

Wenn Sie möchten, dass der Elternteil die zusätzliche Klasse steuert, können Sie ihn einfach an die untergeordneten Komponenten weitergeben und sie ihrem vorhandenen Klassennamen hinzufügen ( jsfiddle Demo ):

generasacodicetagpre.

Es macht jedoch wahrscheinlich mehr Sinn, um das Kind den Klassennamen verwalten zu lassen, und senden Sie einfach einige Daten, um anzuzeigen, ob er seine aktive Klasse einstellen soll ( jsfiddle Demo ):

generasacodicetagpre.

Answer 2

AS Brian Voelker erwähnte es in der Kommentare , der nun offizielle Weg, um Klassen in der Reaktion zu manipulieren, ist die Verwendung des Klassennames Dienstprogramm.

Sie könnten Ihre beiden Komponenten wie so definieren:

generasacodicetagpre.

und leiten Sie einfach eine generationspoDiCETAGCODE-Stütze an, um die NamenssEs-Klasse umzuschalten.

Answer 3

Ich hatte ein Problem ähnlich, ich habe eine Tabbbed-Schublade erstellt, und ich habe nur die mit dem Tabber angeforderte Komponente erstellt, aber solche Lösung war nicht ideal, da ich jeden Mal, wenn ich den Zustand der untergeordneten Komponente verlorder tabber.

Um dies in dem Render zu vermeiden, rufe ich eine Funktion an, um alle meine Kinder zu rendern, in dieser Funktion, in der ich jedes Kind in einer DIV wickle, und ich leute den benötigten Klassennamen in der DIV, in meinem Fall, in dem ich eine einzelne Komponente pro anzeigen mussteMal, also habe ich Display verwendet: Block oder keiner, je nach Taste geklickt.

generasacodicetagpre.

hiddencomponent { Anzeige: Keine; }

.visiblecomponent { Bildschirmsperre; }