Reagieren: Inline-Bedingung bedingt an Komponente übergeben

81

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().

Matthew Herbst
quelle
Können Sie auch den Code für Childangeben? Wolltest du auch sagen <Child editableOpts={this.props.editableOpts} />anstatt <Child editable={this.props.editableOpts} />?
Jim Skerritt
@ JimSkerritt Ich habe die Requisiten nicht verwirrt, obwohl ich weiß, dass es so aussieht. Ich versuche zu benutzenreact-bootstrap-table und das ist das Format, das sie verwenden. Ich bin mir nicht sicher, ob der ChildCode für das, was ich frage, wirklich wichtig ist, weshalb ich ihn nicht aufgenommen habe. Ich bin wirklich nur auf der Suche nach einer Möglichkeit, eine Requisite optional zu übergeben oder nicht zu übergeben Child, ohne dass eine große Menge ähnlichen Codes in if-Anweisungen in der Parent.
Matthew Herbst
1
Gotcha, ich überprüfe nur :) Ich werde in Kürze eine Antwort für Sie haben
Jim Skerritt

Antworten:

141

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}
    />;
  }
});
Jim Skerritt
quelle
Oh toll! Haben Sie das irgendwo in der Dokumentation gefunden? Ich suchte danach, konnte aber während einer schnellen Suche nichts finden
Matthew Herbst
Ich bin mir nicht sicher, ob es in der Dokumentation steht oder nicht, nur etwas, was ich bei der Verwendung von React gelernt habe :)
Jim Skerritt
8
nullist nicht mit solcher Macht wie undefinedBTW bewaffnet .
Saison
2
nützlicher Trick! Ich wünschte, es gäbe gute Ressourcen für den effektiven Einsatz von Techniken zum bedingten Rendern
Ich
1
Im falseFall , dass es nicht für mich arbeiten, wie ich wollte - ich immer noch ein Schlüssel-Wert - Paar erhalten: property: null. Ist es immer noch möglich, es irgendwie mit einem einzelnen JSX-Element zu tun?
Gal Grünfeld
25

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

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

sollte arbeiten.

Jamal Hussain
quelle
1
Ergibt dies nicht das gleiche Ergebnis wie editable = {this.props.editable? this.props.editableOpts: undefined} Oder gibt es einen Unterschied?
Garyee
1
@garyee: Der Unterschied besteht darin, dass einige Komponenten möglicherweise fälschlicherweise undefinedals Überschreibung behandelt werden (z. B. nullimmer eine Überschreibung). Die einzige Möglichkeit, den Standardwert beizubehalten, anstatt ihn auf einen falschen Wert zu setzen, besteht darin, ihn explizit nicht zu übergeben, nicht zu übergeben undefined.
Yann Dìnendal
@ YannDìnendal Was ist, wenn ich ein leeres Objekt anstelle eines undefinierten verwende, wie <Child {... (this.props.editable? {Editable: {this.props.editableOpts}}: {)}> Macht es einen Unterschied? welches ist besser?
sktguha
1
@sktguha: ja in der Tat, sieht aus wie ein Tippfehler, denke ich: Wir können nicht undefiniert verbreiten, also ja, es sollte ein {}am Ende sein. Ich werde eine Ausgabe vorschlagen, danke :)
Yann Dìnendal
16

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

Leon Gilyadov
quelle
Ich mag diese Lösung. Ich würde es jedoch verwenden childProps, um Verwirrung zu vermeiden
Daniel Reina
4

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 .

AmerllicA
quelle
0
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.

sanair96
quelle
1
Das Übergeben undefinedan eine Requisite ist gleichbedeutend mit dem Übergeben überhaupt nicht.
Matthew Herbst
Ja ich verstehe. Ich wollte nur, dass es klar ist! Vielen Dank!
Sanair96
0

Sie können auch diesen kurzen Weg versuchen

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