Реагуйте: вбудований умовно передає властивість компоненту

Я хотів би знати, чи є кращий спосіб умовно передати опис, ніж використання оператора if.

Наприклад, зараз у мене є:

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 />
      );
    }
  }
});

Чи є спосіб написати це без оператора if? Я думав щось подібне до типу вбудованого-якщо-висловлювання в 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} 
      />
    );
  }
});

Для підведення підсумків : Я намагаюся знайти спосіб визначити опору Child, але передаю значення (або роблю щось інше), яке Childвсе одно витягує значення цього реквізиту з Childвласного getDefaultProps().

Ви були близькі зі своєю ідеєю. Виявляється, передача undefinedдля реквізиту - це те саме, що взагалі не включати його, що все одно спричинить значення пропа за замовчуванням. Отже, ви можете зробити щось подібне:

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}
    />;
  }
});

Додайте оператор поширення до this.props.editable:

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

повинен працювати.

Визначте propsзмінну:

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

А потім використовуйте його в JSX:

<Child {...props} />

Ось рішення у вашому коді:

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} />
    );
  }
});

Джерело, документація React: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Насправді, якщо ваш проп буде логічним, він не потрібен для реалізації умови, але якщо ви хочете додати проп за вбудованою умовою, вам слід написати, як показано нижче:

const { editable, editableOpts } = this.props;
return (
  <Child {...(editable && { editable: editableOpts } )} />
);

Сподіваюся, це вас не бентежить. що {...означає це поширення оператор як пропливають існував реквізит: {...props}і editable &&кошти , якщо editableце об'єкт буде робити і ми зробимо новий об'єкт , як він: що це значить , але якщо це правда.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})} 
      />
    );
  }
});

Це передає реквізит, якщо він визначений. В іншому випадку реквізит не передається. В інших відповідях реквізит все ще передається, але значення, undefinedяке все ще означає, що реквізит передається.

також ви можете спробувати цей короткий ручний спосіб

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