Chciałbym wiedzieć, czy istnieje lepszy sposób warunkowego przekazania właściwości niż użycie instrukcji if.
Na przykład w tej chwili mam:
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 />
);
}
}
});
Czy jest sposób, aby napisać to bez instrukcji if? Zastanawiałem się nad czymś podobnym do typu instrukcji inline-if w 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}
/>
);
}
});
Podsumowując : próbuję znaleźć sposób na zdefiniowanie właściwości dla Child
, ale przekazać wartość (lub zrobić coś innego), która Child
nadal pobiera wartość tego właściwości z Child
własnej getDefaultProps()
.
javascript
reactjs
inline
Matthew Herbst
źródło
źródło
Child
? Poza tym, czy chciałeś powiedzieć<Child editableOpts={this.props.editableOpts} />
zamiast<Child editable={this.props.editableOpts} />
?react-bootstrap-table
i to jest format, którego używają. Nie jestem pewien, czyChild
kod faktycznie ma znaczenie dla tego, o co pytam, dlatego go nie uwzględniłem. Naprawdę szukam sposobu, aby opcjonalnie przekazać lub nie przekazać rekwizytuChild
, który nie wymaga posiadania ogromnej ilości podobnego kodu w instrukcjach if wParent
.Odpowiedzi:
Byłeś blisko swojego pomysłu. Okazuje się, że przekazanie
undefined
właściwości jest równoznaczne z nieuwzględnianiem jej w ogóle, co nadal będzie wywoływać domyślną wartość właściwości. Możesz więc zrobić coś takiego: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} />; } });
źródło
null
nie jest uzbrojony w taką moc jakundefined
BTW.false
przypadku, gdy nie działa to tak, jak chciałem - nadal otrzymuję parę klucz-wartośćproperty
::null
. Czy nadal można to jakoś zrobić za pomocą pojedynczego elementu JSX?Dodaj operator spreadu do
this.props.editable
:<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {})} >
powinno działać.
źródło
undefined
jako nadpisanie (na przykładnull
, które jest zawsze przesłonięciem), więc jedynym sposobem na zachowanie wartości domyślnej zamiast ustawiania jej na fałszywą wartość jest jawne jej nieprzekazywanie, nieprzekazywanieundefined
.{}
na końcu.Zdefiniuj
props
zmienną:let props = {}; if (this.props.editable){ props.editable = this.props.editable; }
A potem użyj go w JSX:
Oto rozwiązanie w Twoim kodzie:
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} /> ); } });
Źródło, dokumentacja React: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes
źródło
childProps
jednak uniknąć nieporozumieńWłaściwie, jeśli twoja prop jest logiczna, nie jest potrzebna do implementacji warunku, ale jeśli chcesz dodać rekwizyt przez warunek w linii, powinieneś napisać jak poniżej:
const { editable, editableOpts } = this.props; return ( <Child {...(editable && { editable: editableOpts } )} /> );
Mam nadzieję, że to cię nie zmyli. to
{...
oznacza, że jest operator spread jak przepływające istniały rekwizyty:{...props}
ieditable &&
środków, jeślieditable
jest obiekt pozwoli i zrobimy nowy obiekt podoba: to znaczy, że jednak jeśli jest to prawdą.true
{ editable: editableOpts }
{...
{...{ editable: editableOpts }}
editable={editableOpts}
this.porps.editable
źródło
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})} /> ); } });
Spowoduje to przekazanie właściwości, jeśli są zdefiniowane. W przeciwnym razie rekwizyty nie są przekazywane. W drugiej odpowiedzi rekwizyty są nadal przekazywane, ale wartość jest taka,
undefined
która nadal oznacza, że rekwizyty są przekazywane.źródło
undefined
do rekwizytu jest równoznaczne z nieprzekazywaniem go wcale.możesz też spróbować tej krótkiej ręki
<Child {...(this.props.editable && { editable: this.props.editableOpts })} />
źródło