Ich möchte das deaktivierte Attribut eines Schaltflächenelements dynamisch einschließen / weglassen. Ich habe viele Beispiele für dynamische Attributwerte gesehen, aber nicht für Attribute selbst. Ich habe die folgende Renderfunktion:
render: function() {
var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
return <button {maybeDisabled}>Clear cart</button>
}
Dies löst einen Analysefehler aufgrund des Zeichens "{" aus. Wie kann ich das deaktivierte Attribut basierend auf dem (booleschen) Ergebnis von AppStore.cartIsEmpty () einschließen / weglassen?
a[disabled] { pointer-events: none; }
stoppt CSS wie: Aktionen für ein Element / eine KomponenteSie können dem
disabled
Attribut einen Booleschen Wert übergeben.quelle
disabled
Attribut für den resultierenden HTML- CodeIch benutze React 16 und das funktioniert bei mir (wo
bool
ist dein Test):Grundsätzlich geben Sie basierend auf test (
bool
) ein Objekt mit dem Attribut zurück oder Sie geben ein leeres Objekt zurück.Wenn Sie mehrere Attribute hinzufügen oder weglassen müssen, können Sie Folgendes tun:
Für eine ausführlichere Verwaltung von Attributen empfehle ich, das Objekt mit (oder ohne) Attributen außerhalb von JSX vorzufertigen.
quelle
Eine sauberere Art, dynamische Attribute zu erstellen, die für alle Attribute funktioniert, ist
Rufen Sie Ihre Reaktionskomponente wie folgt auf
Tipps:
Sie können eine
dynamicAttributes
Funktion an einem gemeinsamen Ort / in Dienstprogrammen haben und diese importieren, um sie für alle Komponenten zu verwendenSie können einen Wert übergeben,
null
um keine dynamischen Attribute zu rendernquelle
Ähnliches finden Sie in der Dokumentation.
https://facebook.github.io/react/docs/transferring-props.html
In Ihrem Fall könnte so etwas sein
Dieser Code verwendet ES6, aber ich denke, Sie haben die Idee.
Dies ist cool, da Sie dieser Komponente viele andere Attribute übergeben können und sie weiterhin funktioniert.
quelle
Die Version, die ich verwendet habe, war:
quelle
Eine einfache und saubere Art, es zu tun
Behinderte sollten von solchen Requisiten kommen
quelle
Weitaus sauberer als die akzeptierte Lösung ist die von AnilRedshift erwähnte Lösung, auf die ich jedoch näher eingehen werde.
Einfach ausgedrückt haben HTML-Attribute einen Namen und einen Wert. Als Abkürzung können Sie den Namen nur für "deaktiviert", "mehrfach" usw. verwenden. Die Langhandversion funktioniert jedoch weiterhin und ermöglicht es React, auf die bevorzugte Weise zu arbeiten.
disabled={disabled ? 'disabled' : undefined}
ist die am besten lesbare Lösung.quelle
Zuerst können Sie einfach überprüfen
Hinweis: ** deaktivierter Wert ist kein String, sondern sollte boolesch sein .
Nun zur Dynamik. Sie können einfach schreiben
Wie Sie sehen können, verwende ich die Eigenschaft disabled und in geschweiften Klammern kann es sich um eine lokale Variable / einen Status var handeln. Die Variable
disable
enthält die Werte true / false.quelle
Dies könnte funktionieren, das Problem mit deaktiviert ist, dass man nicht einfach einen Booleschen Wert dafür festlegen kann.
quelle