Reageren: geef prop voorwaardelijk door aan component

Ik zou graag willen weten of er een betere manier is om een ​​prop voorwaardelijk door te geven dan een if-statement te gebruiken.

Ik heb nu bijvoorbeeld:

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

Is er een manier om dit te schrijven zonder de if-statement? Ik zat te denken aan iets in de trant van een soort inline-if-statement in de 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} 
      />
    );
  }
});

Om af te ronden: ik probeer een manier te vinden om een ​​prop voor Childte definiëren, maar geef een waarde door (of doe iets anders) zodat Childhaalt nog steeds de waarde van die prop uit Child‘s eigen getDefaultProps().


Antwoord 1, autoriteit 100%

U was dichtbij met uw idee. Het blijkt dat het doorgeven van undefinedvoor een prop hetzelfde is als het helemaal niet opnemen ervan, wat nog steeds de standaard prop-waarde activeert. Dus je zou zoiets als dit kunnen doen:

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

Antwoord 2, autoriteit 31%

Voeg een spread-operator toe aan de this.props.editable:

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

zou moeten werken.


Antwoord 3, autoriteit 11%

Definieer propsvariabele:

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

En gebruik het dan in JSX:

<Child {...props} />

Hier is een oplossing in uw 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} />
    );
  }
});

Bron, React-documentatie: https://facebook .github.io/react/docs/jsx-in-depth.html#spread-attributes


Antwoord 4, autoriteit 4%

Eigenlijk, als je prop boolean is, is het niet nodig om een ​​voorwaarde te implementeren, maar als je een prop per inline-voorwaarde wilt toevoegen, moet je schrijven zoals hieronder:

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

Ik hoop dat het je niet in verwarring brengt. de {...betekent dat het een spread-operator is, zoals het doorgeven van bestaande rekwisieten: {...props}en de editable &&betekent als editabletrueis, zal het { editable: editableOpts }object maken en met {...zullen we een nieuw object zoals dit: {...{ editable: editableOpts }}dat het editable={editableOpts}betekent, maar als this.porps.editableis waar.


Antwoord 5

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

Dit passeert de rekwisieten als ze zijn gedefinieerd. Anders worden de rekwisieten niet doorgegeven. In de andere antwoorden worden de rekwisieten nog steeds doorgegeven, maar de waarde is undefined, wat nog steeds betekent dat de rekwisieten worden doorgegeven.


Antwoord 6

u kunt ook deze korte manier proberen

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

Antwoord 7

Hallo, ik ben misschien te laat om in te springen, maar ik wil een kleine tip delen.
Voor het geval je hier bent om de reden dat je rekwisieten dynamisch wilt doorgeven. Dan kun je * sign gebruiken om alle dingen als een alias te importeren, d.w.z. in dit geval als grs, dan zullen de imports in een object zijn, dan kun je dat object gebruiken om rekwisieten dynamisch door te geven.
Ik hoop dat dit sommigen van jullie zal helpen.

import * as grs from "../components/Theme";
import React from "react";
const GridInput = ({ sp, ...props }) => {
  return (
    <Grid {...grs[`gr${sp}`]}>
      <Input {...props} />
    </Grid>
  );
};
export default GridInput;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Other episodes