Tengo un componente React, y dentro del método de render del componente tengo algo como esto:
render() { return ( <div> <div> // removed for brevity </div> { switch(...) {} } <div> // removed for brevity </div> </div> ); } Ahora el punto es que tengo dos elementos div , uno en la parte superior y otro en la parte inferior, que son fijos. En el medio, quiero tener una declaración de cambio y, de acuerdo con un valor en mi estado, quiero representar un componente diferente. Básicamente, quiero que los dos elementos div estén fijos siempre, y justo en el medio para representar un componente diferente cada vez. Estoy usando esto para implementar un procedimiento de pago de varios pasos). Sin embargo, como es el código actualmente, no funciona, ya que me da un error que dice que el switch es inesperado. ¿Alguna idea de cómo lograr lo que quiero?
Pruebe esto, que también es mucho más limpio: Saque ese interruptor del renderizado en una función y simplemente llámelo pasando los parámetros que desee. Por ejemplo:
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> ); }A diferencia de otras respuestas, preferiría alinear el "interruptor" en la función de renderizado. Deja más claro qué componentes se pueden renderizar en esa posición. Puede implementar una expresión similar a un interruptor usando un objeto javascript simple y antiguo:
render () { return ( <div> <div> {/* removed for brevity */} </div> { { 'foo': <Foo />, 'bar': <Bar /> }[param] } <div> {/* removed for brevity */} </div> </div> ) }Eso está sucediendo, porque la declaración de switch es una statement , pero aquí javascript espera una expresión.
Aunque no se recomienda usar la declaración de cambio en un método de render , puede usar la función de autoinvocación para lograr esto:
render() { // Don't forget to return a value in a switch statement return ( <div> {(() => { switch(...) {} })()} </div> ); }