Ik zou graag willen weten of er een betere manier is om een prop voorwaardelijk door te geven dan een if-statement te gebruiken.
Ik heb nu bijvoorbeeld:
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 />
);
}
}
});
Is er een manier om dit te schrijven zonder de if-statement? Ik zat te denken aan iets in de trant van een soort inline-if-statement in de JSX:
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}
/>
);
}
});
Om af te ronden: ik probeer een manier te vinden om een prop voor Child
te definiëren, maar geef een waarde door (of doe iets anders) zodat Child
haalt nog steeds de waarde van die prop uit Child
‘s eigen getDefaultProps()
.
Antwoord 1, autoriteit 100%
U was dichtbij met uw idee. Het blijkt dat het doorgeven van undefined
voor een prop hetzelfde is als het helemaal niet opnemen ervan, wat nog steeds de standaard prop-waarde activeert. Dus je zou zoiets als dit kunnen doen:
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}
/>;
}
});
Antwoord 2, autoriteit 31%
Voeg een spread-operator toe aan de this.props.editable
:
<Child {...(this.props.editable ? {editable: this.props.editableOpts} : {})} >
zou moeten werken.
Antwoord 3, autoriteit 11%
Definieer props
variabele:
let props = {};
if (this.props.editable){
props.editable = this.props.editable;
}
En gebruik het dan in JSX:
<Child {...props} />
Hier is een oplossing in uw 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} />
);
}
});
Bron, React-documentatie: https://facebook .github.io/react/docs/jsx-in-depth.html#spread-attributes
Antwoord 4, autoriteit 4%
Eigenlijk, als je prop boolean is, is het niet nodig om een voorwaarde te implementeren, maar als je een prop per inline-voorwaarde wilt toevoegen, moet je schrijven zoals hieronder:
const { editable, editableOpts } = this.props;
return (
<Child {...(editable && { editable: editableOpts } )} />
);
Ik hoop dat het je niet in verwarring brengt. de {...
betekent dat het een spread-operator is, zoals het doorgeven van bestaande rekwisieten: {...props}
en de editable &&
betekent als editable
true
is, zal het { editable: editableOpts }
object maken en met {...
zullen we een nieuw object zoals dit: {...{ editable: editableOpts }}
dat het editable={editableOpts}
betekent, maar als this.porps.editable
is waar.
Antwoord 5
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})}
/>
);
}
});
Dit passeert de rekwisieten als ze zijn gedefinieerd. Anders worden de rekwisieten niet doorgegeven. In de andere antwoorden worden de rekwisieten nog steeds doorgegeven, maar de waarde is undefined
, wat nog steeds betekent dat de rekwisieten worden doorgegeven.
Antwoord 6
u kunt ook deze korte manier proberen
<Child {...(this.props.editable && { editable: this.props.editableOpts })} />
Antwoord 7
Hallo, ik ben misschien te laat om in te springen, maar ik wil een kleine tip delen.
Voor het geval je hier bent om de reden dat je rekwisieten dynamisch wilt doorgeven. Dan kun je * sign gebruiken om alle dingen als een alias te importeren, d.w.z. in dit geval als grs, dan zullen de imports in een object zijn, dan kun je dat object gebruiken om rekwisieten dynamisch door te geven.
Ik hoop dat dit sommigen van jullie zal helpen.
import * as grs from "../components/Theme";
import React from "react";
const GridInput = ({ sp, ...props }) => {
return (
<Grid {...grs[`gr${sp}`]}>
<Input {...props} />
</Grid>
);
};
export default GridInput;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>