Reagieren: Inline-Bedingung bedingt an Komponente übergeben

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 Childdem eigenen abzieht getDefaultProps().

Sie waren nah an Ihrer Idee. Es stellt sich heraus, dass das Übergeben undefinedeiner 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}
    />;
  }
});

Fügen Sie einen Spread-Operator hinzu zu this.props.editable:

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

sollte arbeiten.

propsVariable definieren :

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

Und dann verwenden Sie es in JSX:

<Child {...props} />

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

Wenn 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 die editable &&Mittel , wenn editableist truedas { editable: editableOpts }Objekt machen und mit {...wir ein neues Objekt wie es machen: {...{ editable: editableOpts }}dass es bedeutet , editable={editableOpts}aber wenn this.porps.editablewahr ist .

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 undefinedbedeutet immer noch, dass die Requisiten übergeben werden.

Sie können auch diesen kurzen Weg versuchen

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