Reagieren: Inline bedingtes Übergeben von Prop an Komponente

Lesezeit: 6 Minuten

Benutzer-Avatar
Matthäus Herbst

Ich würde gerne wissen, ob es einen besseren Weg gibt, eine Stütze bedingt zu übergeben, als eine if-Anweisung zu verwenden.

Ich habe z.B. jetzt:

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 dachte an etwas in der Art einer Art Inline-if-Anweisung in 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} 
      />
    );
  }
});

Einwickeln: Ich versuche, einen Weg zu finden, eine Requisite für zu definieren Childaber übergeben Sie einen Wert (oder tun Sie etwas anderes), so dass Child zieht immer noch den Wert dieser Stütze ab Childist eigen getDefaultProps().

  • Können Sie den Code für angeben Child auch? Wollten Sie auch sagen <Child editableOpts={this.props.editableOpts} /> Anstatt von <Child editable={this.props.editableOpts} />?

    – Jim Skerritt

    26. August 2015 um 17:21 Uhr

  • @JimSkerritt Ich habe die Requisiten nicht verwechselt, obwohl ich weiß, dass es so aussieht. Ich versuche zu verwenden react-bootstrap-table und das ist das Format, das sie verwenden. Ich bin mir nicht sicher Child Code ist tatsächlich wichtig für das, was ich frage, weshalb ich ihn nicht aufgenommen habe. Ich suche wirklich nur nach einer Möglichkeit, eine Requisite optional weiterzugeben oder nicht weiterzugeben Child das erfordert keine riesige Menge an ähnlichem Code in if-Anweisungen in der Parent.

    – Matthäus Herbst

    26. August 2015 um 17:24 Uhr


Du warst nah dran mit deiner Idee. Es stellt sich heraus, dass vorbei undefined für eine Requisite ist dasselbe, als würde man sie überhaupt nicht einbeziehen, was immer noch den Standard-Requisitenwert auslöst. Du könntest also so etwas machen:

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

  • Oh toll! Hast du das irgendwo in der Dokumentation gefunden? Ich habe danach gesucht, aber bei der schnellen Suche nichts gefunden

    – Matthäus Herbst

    26. August 2015 um 17:37 Uhr

  • null ist nicht mit solcher Macht bewaffnet wie undefinedÜbrigens.

    – Jahreszeit

    20. August 2016 um 10:46 Uhr

  • nützlicher Trick! Ich wünschte, es gäbe gute Ressourcen zur effektiven Verwendung von bedingten Rendering-Techniken

    – Nicodjimenez

    22. September 2017 um 3:21 Uhr

  • In dem false Falls es bei mir nicht so funktioniert, wie ich es wollte – ich bekomme immer noch ein Schlüssel-Wert-Paar: property: null. Ist es immer noch möglich, es irgendwie mit einem einzigen JSX-Element zu tun?

    – Gal Grünfeld

    11. Februar 2019 um 19:52 Uhr


  • Ich weiß, dass diese Antwort ziemlich alt ist, daher weiß ich nicht, ob sich die Dinge in der Zwischenzeit geändert haben, aber für alle, die 2021 über diese Antwort stolpern: Bestanden undefined als Requisite ist nicht das gleiche da die Stütze überhaupt nicht eingestellt wird. Innerhalb einer Komponente, Untersuchen Object.keys(props) zeigt Eigenschaften an, die festgelegt wurden – sogar bis zum Wert von undefined. Dies ist für bestimmte Komponenten von Bedeutung, die basierend auf den eingestellten Requisiten sowohl als gesteuerte als auch als ungesteuerte Komponenten funktionieren.

    – Nikolaus

    4. Mai 2021 um 20:38 Uhr

Benutzer-Avatar
Jamal Hussain

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

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

sollte arbeiten.

  • Ergibt dies nicht dasselbe Ergebnis wie editable= {this.props.editable ? this.props.editableOpts : undefined} Oder gibt es einen Unterschied?

    – Flummiboy

    26. Juni 2019 um 9:47 Uhr

  • @garyee: Der Unterschied besteht darin, dass einige Komponenten möglicherweise falsch behandelt werden undefined als Überschreibung (wie nullwas immer eine Überschreibung ist), sodass die einzige Möglichkeit, den Standardwert beizubehalten, anstatt ihn auf einen falschen Wert zu setzen, darin besteht, ihn explizit nicht zu übergeben, nicht zu übergeben undefined.

    – Yann Dinendal

    16. September 2019 um 13:53 Uhr

  • @YannDìnendal was ist, wenn ich ein leeres Objekt anstelle von undefiniert verwende, wie Macht es einen Unterschied? welches ist besser?

    – sktguha

    18. August 2020 um 18:31 Uhr

  • @sktguha: Ja, sieht in der Tat wie ein Tippfehler aus, denke ich: Wir können nicht undefiniert verbreiten, also ja, es sollte ein sein {} Am Ende. Ich werde eine Ausgabe vorschlagen, danke 🙂

    – Yann Dinendal

    20. August 2020 um 18:23 Uhr


  • Der Ausdruck kann vereinfacht werden als <Child {...(this.props.editable && { editable: this.props.editableOpts })} />

    – Normal

    19. Mai um 13:16 Uhr

Definieren props Variable:

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

  • Ich mag diese Lösung. Ich würde verwenden childProps aber um Verwirrung zu vermeiden

    – Daniel Reina

    7. Juli 2020 um 12:13 Uhr

Wenn Ihre Prop boolesch ist, ist es eigentlich nicht erforderlich, die Bedingung zu implementieren, aber wenn Sie Prop durch Inline-Bedingung hinzufügen möchten, sollten Sie wie folgt schreiben:

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

Hoffe es verwirrt dich nicht. das {... bedeutet, dass es sich um einen Spread-Operator handelt, wie das Übergeben vorhandener Requisiten: {...props} und die editable && bedeutet wenn editable ist true das { editable: editableOpts } Objekt wird machen und mit {... Wir werden ein neues Objekt wie dieses erstellen: {...{ editable: editableOpts }} dass es bedeutet editable={editableOpts} doch wenn this.porps.editable ist wahr.

Sie können auch diesen kurzen Weg versuchen

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

  • Würde dies nicht zu einem Laufzeitfehler führen, wenn this.props.editable ist falsch, weil der Spread-Operator versuchen würde, einen booleschen Wert zu verbreiten?

    – Martin

    5. Januar um 10:30 Uhr

Dies kann Ihnen helfen. Ich verwende diese Methode oft

    <Component
      otherProps
      {...(yourCondition ? { 
        deleteIcon: <DeleteIcon id={`${id}_icon`} />,
       }
      : {})}
    />

Ein anderer Ansatz

<Component 
  {...(yourCondition && 
  { prop: propValue })}
/>

  • Würde dies nicht zu einem Laufzeitfehler führen, wenn this.props.editable ist falsch, weil der Spread-Operator versuchen würde, einen booleschen Wert zu verbreiten?

    – Martin

    5. Januar um 10:30 Uhr

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 ist undefined was immer noch bedeutet, dass die Requisiten übergeben werden.

  • Vorbeigehen undefined zu einer Requisite ist gleichbedeutend damit, sie überhaupt nicht zu bestehen.

    – Matthäus Herbst

    10. Oktober 2019 um 17:39 Uhr

  • @MatthewHerbst Das stimmt nicht. Vorbeigehen undefined ist nicht dasselbe wie gar nicht bestehen.

    – pisch

    3. Juni 2021 um 13:22 Uhr

  • @pishpish ist es in der Tat. Versuch es.

    – Matthäus Herbst

    7. Juni 2021 um 15:33 Uhr

  • Oh Mann, ich dachte, das wäre ein eckiger Thread. Es tut uns leid.

    – pisch

    7. Juni 2021 um 21:08 Uhr

  • @MatthewHerbst Mein Fehler. Ich hatte die Illusion, dass das Passieren von Undefined dem Passieren von Requisiten gleichkommt.

    – sanair96

    29. September 2021 um 6:25 Uhr


1257470cookie-checkReagieren: Inline bedingtes Übergeben von Prop an Komponente

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy