web-dev-qa-db-fra.com

Comment puis-je écrire une autre si la structure utilise React (JSX) - le ternaire n'est pas assez expressif

Je veux écrire l'équivalent dans rea:

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 un meilleur moyen?

javascriptreactjsjsx
7
Henry

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>;
}
25
Yosef Weiner

Si vous n'avez pas besoin du <div>, retournez 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 du bloc else.

En général, il n'est pas nécessaire d'intégrer tout 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 déclaration.

4
Felix Kling

Le calcul de la valeur, la liaison à une variable, puis la sortie ultérieure est préférable. Si vous do voulez 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 fait remarquer, vous pouvez également supprimer cette division et continuer à utiliser cette approche:

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

Si votre condition est aussi simple que ce que vous avez exprimé, je pense que vous pouvez toujours utiliser 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 un autre moyen de résoudre ce problème: utiliser 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);

Quelques hypothèses sont formulées ici. Que l'objet n'est pas nul et qu'il n'a qu'une propriété. 

Mais si cela est vrai, pour de tels scénarios, switch pourrait être plus performant. Cela pourrait vous intéresser:

Javascript switch vs if else

0
KumarM

Si un problème persiste, veuillez coller la ligne ci-dessous dans votre fichier eslintrc.js.

"no-nested-ternary" : "off"

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

0
Nouman khan

En effet, ce n'est pas le chemin.

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