Reaguj: warunkowo przekazuje prop do komponentu

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 Childnadal pobiera wartość tego właściwości z Childwłasnej getDefaultProps().

Byłeś blisko swojego pomysłu. Okazuje się, że przekazanie undefinedwł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}
    />;
  }
});

Dodaj operator spreadu do this.props.editable:

<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {})} >

powinno działać.

Zdefiniuj propszmienną:

let props = {};
if (this.props.editable){
  props.editable = this.props.editable;
}

A potem użyj go w JSX:

<Child {...props} />

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

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}i editable &&środków, jeśli editablejest 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

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, undefinedktóra nadal oznacza, że ​​rekwizyty są przekazywane.

możesz też spróbować tej krótkiej ręki

 <Child {...(this.props.editable  && { editable: this.props.editableOpts })} />