Ich würde gerne wissen, ob es einen besseren Weg gibt, eine Requisite bedingt zu übergeben, als eine if-Anweisung zu verwenden.
Zum Beispiel habe ich gerade:
var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
if(this.props.editable) {
return (
<Child editable={this.props.editableOpts} />
);
} else {
// In this case, Child will use the editableOpts from its own getDefaultProps()
return (
<Child />
);
}
}
});
Gibt es eine Möglichkeit, dies ohne die if-Anweisung zu schreiben? Ich habe etwas in der Art einer Inline-If-Anweisung in der JSX gedacht:
var parent = React.createClass({
propTypes: {
editable: React.PropTypes.bool.isRequired,
editableOpts: React.PropTypes.shape({...})
},
render: function() {
return (
<Child
{this.props.editable ? editable={this.props.editableOpts} : null}
/>
);
}
});
Zum Abschluss : Ich versuche, einen Weg zu finden, eine Requisite für zu definieren Child
, aber einen Wert zu übergeben (oder etwas anderes zu tun) Child
, der den Wert dieser Requisite immer noch von Child
dem eigenen abzieht getDefaultProps()
.
javascript
reactjs
inline
Matthew Herbst
quelle
quelle
Child
angeben? Wolltest du auch sagen<Child editableOpts={this.props.editableOpts} />
anstatt<Child editable={this.props.editableOpts} />
?react-bootstrap-table
und das ist das Format, das sie verwenden. Ich bin mir nicht sicher, ob derChild
Code für das, was ich frage, wirklich wichtig ist, weshalb ich ihn nicht aufgenommen habe. Ich bin wirklich nur auf der Suche nach einer Möglichkeit, eine Requisite optional zu übergeben oder nicht zu übergebenChild
, ohne dass eine große Menge ähnlichen Codes in if-Anweisungen in derParent
.Antworten:
Sie waren nah an Ihrer Idee. Es stellt sich heraus, dass das Übergeben
undefined
einer Requisite dasselbe ist, als würde man sie überhaupt nicht einschließen, wodurch immer noch der Standardwert der Requisite ausgelöst wird. Sie könnten also so etwas tun:var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { return <Child editable={this.props.editable ? this.props.editableOpts : undefined} />; } });
quelle
null
ist nicht mit solcher Macht wieundefined
BTW bewaffnet .false
Fall , dass es nicht für mich arbeiten, wie ich wollte - ich immer noch ein Schlüssel-Wert - Paar erhalten:property
:null
. Ist es immer noch möglich, es irgendwie mit einem einzelnen JSX-Element zu tun?Fügen Sie einen Spread-Operator hinzu zu
this.props.editable
:<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {})} >
sollte arbeiten.
quelle
undefined
als Überschreibung behandelt werden (z. B.null
immer eine Überschreibung). Die einzige Möglichkeit, den Standardwert beizubehalten, anstatt ihn auf einen falschen Wert zu setzen, besteht darin, ihn explizit nicht zu übergeben, nicht zu übergebenundefined
.{}
am Ende sein. Ich werde eine Ausgabe vorschlagen, danke :)props
Variable definieren :let props = {}; if (this.props.editable){ props.editable = this.props.editable; }
Und dann verwenden Sie es in JSX:
Hier ist eine Lösung in Ihrem Code:
var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { let props = {}; if (this.props.editable){ props.editable = this.props.editable; } return ( <Child {...props} /> ); } });
Quelle, React-Dokumentation: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes
quelle
childProps
, um Verwirrung zu vermeidenWenn Ihre Requisite boolesch ist, muss die Bedingung nicht implementiert werden. Wenn Sie jedoch eine Requisite nach Inline-Bedingungen hinzufügen möchten, sollten Sie wie folgt schreiben:
const { editable, editableOpts } = this.props; return ( <Child {...(editable && { editable: editableOpts } )} /> );
Hoffe es verwirrt dich nicht. die
{...
Mittel ist es Ausbreitung Betreiber wie existierte Requisiten vorbei:{...props}
und dieeditable &&
Mittel , wenneditable
isttrue
das{ editable: editableOpts }
Objekt machen und mit{...
wir ein neues Objekt wie es machen:{...{ editable: editableOpts }}
dass es bedeutet ,editable={editableOpts}
aber wennthis.porps.editable
wahr ist .quelle
var parent = React.createClass({ propTypes: { editable: React.PropTypes.bool.isRequired, editableOpts: React.PropTypes.shape({...}) }, render: function() { return ( <Child {...(this.props.editable && {editable=this.props.editableOpts})} /> ); } });
Dies übergibt die Requisiten, wenn sie definiert sind. Sonst werden die Requisiten nicht übergeben. In den anderen Antworten werden die Requisiten immer noch übergeben, aber der Wert
undefined
bedeutet immer noch, dass die Requisiten übergeben werden.quelle
undefined
an eine Requisite ist gleichbedeutend mit dem Übergeben überhaupt nicht.Sie können auch diesen kurzen Weg versuchen
<Child {...(this.props.editable && { editable: this.props.editableOpts })} />
quelle