Comment utiliser l'instruction switch dans un composant React?

Question

J'ai une Réagir composant, et à l'intérieur de l' render méthode de la composante j'ai quelque chose comme ceci:

render() {
    return (
        <div>
            <div>
                // removed for brevity
            </div>

           { switch(...) {} }

            <div>
                // removed for brevity
            </div>
        </div>
    );
}

Maintenant, le point est que j'ai deux div éléments, l'un en haut et un en bas, qui sont fixes. Dans le milieu, je veux avoir une instruction switch, et selon une valeur dans mon état, je tiens à rendre un composant différent. Donc, fondamentalement, je veux les deux div éléments à être fixe toujours, et juste au milieu de rendre un composant différent à chaque fois. Je suis en utilisant le présent de mettre en œuvre un multi-étape de la procédure de paiement). Si, comme c'est le code actuellement, il ne fonctionne pas, comme il me donne une erreur en disant qu' switch est inattendu. Toutes les idées sur la façon de réaliser ce que je veux?

Answer 1

Essayez ceci, qui est également beaucoup plus propre: extrayez ce commutateur du rendu dans une fonction et appelez-le en passant les paramètres que vous voulez. Par exemple:

 renderSwitch(param) {
  switch(param) {
    case 'foo':
      return 'bar';
    default:
      return 'foo';
  }
}

render() {
  return (
    <div>
      <div>
          // removed for brevity
      </div>
      {this.renderSwitch(param)}
      <div>
          // removed for brevity
      </div>
    </div>
  );
} 

Answer 2

Contrairement aux autres réponses, je préférerais intégrer le "commutateur" dans la fonction de rendu. Cela permet de mieux comprendre quels composants peuvent être rendus à cette position. Vous pouvez implémenter une expression semblable à un commutateur en utilisant un ancien objet JavaScript simple:

 render () {
  return (
    <div>
      <div>
        {/* removed for brevity */}
      </div>
      {
        {
          'foo': <Foo />,
          'bar': <Bar />
        }[param]
      }
      <div>
        {/* removed for brevity */}
      </div>
    </div>
  )
}
 

Answer 3

Cela se produit, car la déclaration switch est une déclaration statement , mais ici, javascript attend une expression.

Bien qu'il ne soit pas recommandé d'utiliser l'instruction switch dans une méthode render , vous pouvez utiliser une fonction auto-invoquante pour réaliser ceci:

 render() {
    // Don't forget to return a value in a switch statement
    return (
        <div>
            {(() => {
                switch(...) {}
            })()}
        </div>
    );
}
 

Answer 4

Je l'ai fait dans la méthode render ():

   render() {
    const project = () => {
      switch(this.projectName) {

        case "one":   return <ComponentA />;
        case "two":   return <ComponentB />;
        case "three": return <ComponentC />;
        case "four":  return <ComponentD />;

        default:      return <h1>No project match</h1>
      }
    }

    return (
      <div>{ project() }</div>
    )
  }
 

J'ai essayé de garder le render () return clean, alors j'ai mis ma logique dans une fonction 'const' juste au dessus. De cette façon, je peux aussi bien mettre en retrait les boîtiers de mon commutateur.

Answer 5

Une manière de représenter une sorte de casse de commutateur dans un bloc de rendu, à l'aide d'opérateurs conditionnels:

 {this.props.someVar == 1 &&
    <SomeContent/>
|| this.props.someVar == 2 &&
    <SomeOtherContent />
|| this.props.someOtherVar == 1 &&
    <YetSomeOtherContent />
||
    <SomeDefaultContent />
}
 

Je conseille d’ajouter des parenthèses pour être sûr du résultat attendu, à moins de maîtriser la priorité des opérateurs ...