Gibt es eine Möglichkeit, einer React-Komponente nur Attribute hinzuzufügen, wenn eine bestimmte Bedingung erfüllt ist?
Ich sollte erforderliche und readOnly-Attribute hinzufügen, um Elemente zu bilden, die auf einem Ajax-Aufruf nach dem Rendern basieren, aber ich kann nicht sehen, wie dies gelöst werden kann, da readOnly = "false" nicht dasselbe ist wie das vollständige Weglassen des Attributs.
Das folgende Beispiel sollte erklären, was ich will, aber es wird nicht funktionieren (Analysefehler: Unerwarteter Bezeichner).
var React = require('React');
var MyOwnInput = React.createClass({
render: function () {
return (
<div>
<input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
</div>
);
}
});
module.exports = React.createClass({
getInitialState: function () {
return {
isRequired: false
}
},
componentDidMount: function () {
this.setState({
isRequired: true
});
},
render: function () {
var isRequired = this.state.isRequired;
return (
<MyOwnInput name="test" {isRequired ? "required" : ""} />
);
}
});
javascript
reactjs
Remi Sture
quelle
quelle
aria-modal=true
hat. Sie verschieben die Änderungen (auf false) in den Speicher der Arien- / Datenattribute, aber nichts anderes wird geändert (wie der Inhalt oder die Klasse oder die Variablen der Komponente darin), da ReactJs aria / nicht aktualisiert . Daten attrs dass Komponenten. Ich habe den ganzen Tag herumgespielt, um das zu realisieren.Antworten:
Anscheinend ist React für bestimmte Attribute intelligent genug, um das Attribut wegzulassen, wenn der Wert, den Sie an ihn übergeben, nicht wahr ist. Zum Beispiel:
wird darin enden, dass:
Update: Wenn jemand neugierig ist, wie / warum dies geschieht, finden Sie Details im ReactDOM-Quellcode, insbesondere in den Zeilen 30 und 167 der Datei DOMProperty.js .
quelle
null
bedeutet "so tun, als hätte ich es überhaupt nicht angegeben". Für boolesche dom-Attribute wird true / false der Wiederholung des Attributnamens / false vorgezogen, z. B.<input disabled>
Kompilierung anReact.createElement('input', {disabled: true})
="required"
Teil manuell hinzufügte . Chrome hat tatsächlich nur das Attribut ohne den Wert gerendert.readonly
wird nie hinzugefügt, da React das Attribut erwartetreadOnly
(mit einem Großbuchstaben O).alt={props.alt || null}
.false
, aber nurnull
sichergestellt, dass das Attribut tatsächlich entfernt wurde.Die Antwort von juandemarco ist normalerweise richtig, aber hier ist eine andere Option.
Erstellen Sie ein Objekt, wie Sie möchten:
Mit Spread rendern, optional auch andere Requisiten weitergeben.
quelle
_extends
hinzugefügt wurde, die (unter normalen Umständen) dieprops
konstruierte Funktion übernimmt die "normalen Attribute" und geltenObject.assign(props, inputProps)
.Hier ist ein Beispiel der Verwendung von Bootstrap ‚s
Button
über React-Bootstrap (Version 0.32.4):Je nach Zustand wird entweder
{bsStyle: 'success'}
oder{}
zurückgegeben. Der Spread-Operator verteilt dann die Eigenschaften des zurückgegebenen Objekts auf dieButton
Komponente. Im falschen Fall wird nichts an die Komponente übergeben, da für das zurückgegebene Objekt keine Eigenschaften vorhanden sind.Ein alternativer Weg basierend auf Andy Polhills Kommentar :
Der einzige kleine Unterschied ist , dass bei dem zweiten Beispiel der innere Komponente
<Button/>
istprops
Aufgabe , einen Schlüssel wirdbsStyle
mit einem Wert vonundefined
.quelle
{bsStyle: 'success'}
oder{}
resultiert daraus), und dann wird das Objekt verteilt.<Button bsStyle={ condition ? 'success': undefined } />
finde ich die Syntax etwas einfacher, wird beim Übergebenundefined
die Eigenschaft weggelassen.<Button/>
‚sprops
Objekt einen Schlüssel wirdbsStyle
mit dem Wertundefined
.Hier ist eine Alternative.
Oder seine Inline-Version
quelle
condition
falsch ist, wird versucht, über falsch zu expandieren / zu iterieren, was ich nicht für richtig halte.false
es keine gibt. Fragen Sie einfach bei Babel nach. Dies funktioniert, wenn es alscondition
falsch ausgewertet wird, da Babel den Operator implementiert. Obwohl eine triviale Problemumgehung sein könnte,...( condition ? { disabled: true } : {} )
wird sie dann etwas ausführlich. Danke für diesen netten Input!data-*
oderaria-*
Attribute bedingt ausgeben möchten , da dies in JSX ein Sonderfall ist. Das Attributdata-my-conditional-attr={ false }
wird also ausgegeben,data-my-conditional-attr="false"
anstatt es wegzulassen. facebook.github.io/react/docs/dom-elements.htmlHier ist eine Möglichkeit, wie ich es mache.
Mit einer Bedingung :
Ich bevorzuge es immer noch, Requisiten regelmäßig weiterzugeben, da sie (meiner Meinung nach) besser lesbar sind, wenn keine Bedingungen vorliegen.
Ohne Bedingung :
quelle
...(tooltip && { tooltip }),
? Es funktioniert zwar für Komponenten, aber wenn ich versuche, so etwas im Code zu verwenden, wird eine FehlermeldungfalseyValue && {}
false zurückgegeben wird, so dass es wahrscheinlich ist, dass Sie sich auf false verbreiten, z...(false)
. Es ist viel besser, den vollständigen Ausdruck zu verwenden, damit sich der Spread weiterhin verhält...(condition ? {foo: 'bar'} : {})
Sie können dieselbe Verknüpfung verwenden, mit der (Teile von) Komponenten (
{isVisible && <SomeComponent />}
) hinzugefügt / entfernt werden .quelle
someCondition
zutrifft, abersomeValue
falsch ist (z. B.false
selbst oder0
usw.), wird das Attribut dann immer noch aufgenommen? Dies ist wichtig, wenn es notwendig ist, einen falschen Wert explizit anzugeben, z. B. ein0
für ein Koordinatenattribut usw.data-*
undaria-*
, siehe meinen Kommentar oben. Wenn Sie den Wert zitieren oder als StringsomeAttr={ `${falsyValue}` }
someAttr="false"
Angenommen, wir möchten eine benutzerdefinierte Eigenschaft hinzufügen (mit aria- * oder data- *), wenn eine Bedingung erfüllt ist:
Angenommen, wir möchten eine Stileigenschaft hinzufügen, wenn eine Bedingung erfüllt ist:
quelle
Wenn Sie ECMAScript 6 verwenden, können Sie einfach so schreiben.
quelle
Dies sollte funktionieren, da sich Ihr Status nach dem Ajax-Aufruf ändert und die übergeordnete Komponente erneut gerendert wird.
quelle
In React können Sie Komponenten, aber auch deren Attribute wie Requisiten, Klassenname, ID und mehr bedingt rendern.
In React ist es sehr empfehlenswert, den ternären Operator zu verwenden Sie Komponenten bedingt rendern können.
Ein Beispiel zeigt auch, wie Komponenten und ihr Stilattribut bedingt gerendert werden.
Hier ist ein einfaches Beispiel:
quelle
In Anbetracht des Post JSX In Depth können Sie Ihr Problem folgendermaßen lösen:
quelle