Je veux écrire l'équivalent dans react:

if (this.props.conditionA) {
    <span>Condition A</span>
} else if (this.props.conditionB) {
    <span>Condition B</span>
} else {
    <span>Neither</span>
}

Alors peut-être

render() {
    return (<div>
        {(function(){
            if (this.props.conditionA) {
                return <span>Condition A</span>
            } else if (this.props.conditionB) {
                return <span>Condition B</span>
            } else {
                return <span>Neither</span>
            }
        }).call(this)}
    </div>)
}

Mais cela semble trop complexe. Y a-t-il une meilleure façon?

17
Henry 7 août 2016 à 07:20

6 réponses

Meilleure réponse

Pourquoi dites-vous que le ternaire n'est pas assez expressif?

render() {
  return <span>
    {this.props.conditionA ? "Condition A" 
      : this.props.conditionB ? "Condition B" 
      : "Neither"}
  </span>;
}
46
Yosef Weiner 7 août 2016 à 05:00

Si votre état est aussi simple que ce que vous avez exprimé, je pense que vous pouvez toujours utiliser le ternaire comme @SkinnyJ mentionné ci-dessus. C'est assez élégant, mais je comprends votre inquiétude s'il y a beaucoup de ces conditions à vérifier. Il existe une autre façon de résoudre ce problème: en utilisant l'instruction switch.

const props = {
  conditionA: "this is condition a"
};

let value;

switch (Object.keys(props)[0]) {
  case "conditionA":
    value = "Condition A";
    break;
  case "conditionB":
    value = "Condition B";
    break;
  default:
    value = "Neither";
}

console.log(value);

Il y a quelques hypothèses faites ici. Que l'objet n'est pas nul et qu'il n'a qu'une seule propriété.

Mais si cela est vrai, pour des scénarios comme celui-ci, le commutateur peut être plus performant. Cela pourrait vous intéresser:

Commutateur Javascript vs if else

0
Community 23 mai 2017 à 11:47

Si vous n'avez pas besoin des <div>, renvoyez simplement les éléments <span>:

render() {
  if (this.props.conditionA) {
    return <span>Condition A</span>;
  } else if (this.props.conditionB) {
    return <span>Condition B</span>;
  } else {
    return <span>Neither</span>;
  }
}

Vous pouvez même déplacer la dernière instruction return hors du bloc else.


En général, vous n'avez pas à tout intégrer dans JSX. C'est parfaitement bien de calculer des valeurs à l'avance, comme vous le faites ailleurs:

render() {
  let content;
  if (this.props.conditionA) {
    content = <span>Condition A</span>;
  } else if (this.props.conditionB) {
    content = <span>Condition B</span>;
  } else {
    content = <span>Neither</span>;
  }

  return <div>{content}</div>;
}

Vous devez le faire chaque fois que vous avez besoin / souhaitez utiliser une instruction.

7
Felix Kling 7 août 2016 à 04:30

Il est préférable de calculer la valeur, de se lier à une variable, puis de la générer ultérieurement. Si vous voulez vouloir une logique complexe en ligne, vous pouvez utiliser && et ||:

render() {
    return (<div>
        {
          this.props.conditionA && <span>Condition A</span>
          || this.props.conditionB && <span>Condition B</span>
          || <span>Neither</span>
        }
    </div>)
}

Modifier :

Comme d'autres l'ont souligné, vous pouvez également supprimer ce div enveloppant et toujours utiliser cette approche:

render() {
  return (
    this.props.conditionA && <span>Condition A</span>
    || this.props.conditionB && <span>Condition B</span>
    || <span>Neither</span>
  );
}
3
Jacob 7 août 2016 à 04:37

Si quelqu'un est toujours confronté à ce problème, veuillez coller la ligne ci-dessous dans votre fichier eslintrc.js.

"no-nested-ternary" : "off" 

Cela vous permettra de commencer à utiliser le ternaire imbriqué dans votre code jsx.

0
Meloman 4 sept. 2018 à 08:56

En effet, ce n'est pas ainsi.

var element;
if (this.props.conditionA) {
    element = (<span>Condition A</span>)
} else if (this.props.conditionB) {
    element = (<span>Condition B</span>)
} else {
    element = (<span>Neither</span>)
} 
...
    {element}
0
Hunter 7 août 2016 à 04:23