web-dev-qa-db-fra.com

React: inline passe conditionnellement l'accessoire au composant

J'aimerais savoir s'il existe un meilleur moyen de passer conditionnellement un accessoire que d'utiliser une instruction if. 

Par exemple, maintenant j'ai:

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

Y a-t-il un moyen d'écrire ceci sans l'énoncé if? Je pensais à quelque chose du genre d'un type de déclaration inline-if-statement dans le 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} 
      />
    );
  }
});

Pour conclure : J'essaie de trouver un moyen de définir un accessoire pour Child, mais transmettra une valeur (ou fera quelque chose d'autre) tel que Child extrait toujours la valeur de cet accessoire de Child propre getDefaultProps().

javascriptreactjsinline
35
Matthew Herbst

Vous étiez proche de votre idée. Il s'avère que passer undefined pour un accessoire est le même que de ne pas l'inclure du tout, ce qui déclenchera toujours la valeur de l'accessoire par défaut. Donc, vous pourriez faire quelque chose comme ça:

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

Définir la variable props:

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

Et utilisez-le ensuite dans JSX:

<Child {...props} />

Voici une solution dans votre 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} />
    );
  }
});

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

6
Leon Gilyadov

Ajouter un opérateur de propagation au this.props.editable:

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

devrait fonctionner.

2
Jamal Hussain

En fait, si votre accessoire est booléen, il n'est pas nécessaire de mettre en œuvre la condition, mais si vous voulez ajouter un accessoire par condition en ligne, écrivez comme ci-dessous:

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

J'espère que ça ne vous dérange pas. le {... signifie qu'il est un opérateur répandu comme en passant les propriétés existantes: {...props} et le editable && signifie que si editable est true l'objet { editable: editableOpts } fera et avec {... nous ferons un nouvel objet comme celui-ci: {...{ editable: editableOpts }} qu'il signifie editable={editableOpts} mais si this.porps.editable est vrai. 

0
AmerllicA