Uso de la instrucción Switch en un componente React

1. Cómo usar switch en React (JSX)
2. Alternativas a switch() en React
3. Resumen

La instrucción switch es una de las características más útiles de JavaScript.

Es perfecto para configurar condiciones y devolver un valor específico dependiendo de si esas condiciones se cumplen o no. En React, una declaración de switch es una de las mejores formas de manejar la representación condicional.

Por ejemplo, es posible que desee representar un componente específico en función de las entradas de los usuarios. Puede almacenar el valor de los campos de entrada en el estado y examinar el valor del estado para determinar el componente correcto para representar.

La mayoría de los desarrolladores de React usan JSX para definir componentes e invocarlos. A primera vista, JSX se parece mucho a HTML, por lo que es fácil de leer y realizar cambios cuando sea necesario.

También nos permite usar expresiones JavaScript dentro del código JSX. Sin embargo, su soporte está limitado a expresiones de JavaScript y no se extiende a declaraciones como for o switch.

Lea esta guía para obtener más información sobre las diferencias entre declaraciones y expresiones.

Este artículo discutirá múltiples formas de usar switch() (o sus reemplazos válidos) dentro de JSX.

Cómo usar switch en React (JSX)

JSX es una sintaxis de React que nos permite crear componentes y elementos de interfaz de usuario sin utilizar la función .createElement(). También tiene muchas características adicionales que HTML no tiene.

Por ejemplo, puede escribir código JavaScript regular dentro de JSX. Todo lo que debe hacer es poner las expresiones entre llaves.

Veamos un ejemplo:

class App extends Component {
  render() {
    return <h1>Two plus two is {2+2}</h1>;
  }
}

Aquí tenemos un componente que devuelve un solo elemento de encabezado.

Como puede ver en el código de reproducción, el 2+2 se trata como una expresión de JavaScript válida porque se coloca entre dos llaves. Esta es una demostración simple de una característica convincente.

Al desarrollar aplicaciones React, es una buena idea evitar poner demasiada lógica en su estructura JSX. Esto es necesario para evitar saturar su código.

En su lugar, puede definir una función o variable fuera de la instrucción return y hacer referencia a ella en su código JSX.

Los desarrolladores no pueden escribir declaraciones de switch directamente en el JSX. En primer lugar, sería demasiado largo y, lo que es más importante, las declaraciones no se admiten dentro de JSX.

switch Fuera de la declaración de devolución

Probablemente, la solución más óptima es eliminar por completo switch() de la instrucción return. Luego, puede usar JavaScript estándar sin restricciones y hacer referencia a la función que incluye la instrucción switch.

Veamos un ejemplo]:

class App extends Component {
  render() {
    const functionWithSwitch = (parameter) => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    }
    return <h1>{functionWithSwitch("positive")}</h1>;
  }
}

En este ejemplo, tenemos una función simple functionWithSwitch() que incluye la instrucción switch y devuelve tres valores diferentes basados ​​en el valor del parámetro. En lugar de definir todo esto dentro de JSX, lo hacemos por separado, hacemos referencia a la función y la pasamos al valor deseado.

switch en línea

Anteriormente mencionamos que es imposible usar switch directamente dentro de JSX, pero hay formas de evitar esa regla.

Para algunas personas, las soluciones en línea son más fáciles de leer y comprender lo que sucede. No tiene que mover su atención de un lado a otro a la definición de la función y llamar para averiguar qué está pasando.

Técnicamente, esta solución no es un interruptor, pero funciona exactamente de la misma manera. Veamos un ejemplo:

class App extends Component {
  render() {
    return <h1>
          {
        	{
          'positive': '+',
          'negative': '-'
        	}[param]
      	  }   
      </h1>;
  }
}

Aquí utilizamos un objeto de JavaScript simple para representar una cadena de forma condicional. En este caso, tiene dos propiedades con dos valores. En última instancia, obtendrá un valor de cualquier propiedad a la que haga referencia como param.

Para configurar un caso predeterminado con este enfoque, debe utilizar el operador lógico OR (||).

Función de autoinvocación

Cuando sea necesario, también puede colocar todo el código relacionado con el switch en una función e invocarlo automáticamente dentro de JSX. Esta es una solución un poco larga, pero puede ser necesaria en algunas ocasiones.

Veamos un ejemplo:

class App extends Component {
  render() {
    return <h1>{( () => {
      switch(parameter){
        case "positive":
          return "+"
        case "negative": 
          return "-"
        default:
          return "neutral"
      }
    })()}</h1>;
  }
}

Tomamos el ejemplo de función anterior e inmediatamente lo invocamos para devolver un valor. Una vez más, hay mejores formas de usar declaraciones de switch dentro de JSX, pero esta sigue siendo una buena solución.

Elemento personalizado Switch

La popularidad de React se puede atribuir en gran medida a sus componentes reutilizables.

La creación de un componente Switch personalizado le ahorrará la molestia de escribir una lógica en línea compleja. Además, no tendrá que saltar de un lado a otro para comprender lo que hace una función.

El componente personalizado <Switch /> tomará un accesorio, y dependiendo de su valor; generará uno de los componentes secundarios colocados entre las etiquetas de apertura y cierre del componente Switch.

Veamos un ejemplo:

let SwitchComponent = props => {
    const {condition, childrenElements} = props
    return childrenElements.find(element => {
        return element.props.value === condition
    })
}

Podemos invocar un componente <Switch> y agregar elementos secundarios con valores personalizados en el componente principal. Esto es similar a cómo escribiría diferentes casos en la instrucción switch.

Veamos un ejemplo, basado en la declaración switch que escribimos antes:

<Switch test="positive">
<p value={"positive"}>+</p>
<p value={"negative"}>-</p>
</Switch>

En este caso, debido al valor de la propiedad test, el componente Switch solo representará el elemento de párrafo con un valor positivo.

Alternativas a switch() en React

Los desarrolladores de React a menudo usan un operador ternario para la lógica condicional simple, que toma una condición y devuelve cualquiera de los componentes según la condición. El operador ternario se puede escribir directamente entre llaves dentro de JSX; es simple, fácil de leer y útil.

Veamos nuestro ejemplo y escribamos la misma condición usando el operador ternario:

<h1>{condition === "positive" ? "+" : "-"}</h1>

Esta es una solución relativamente simple. Por supuesto, tiene sus limitaciones y no funcionaría con una lógica más compleja.

Resumen

Este artículo describió muchas formas diferentes de renderizar un componente condicionalmente. Todas estas soluciones son opciones válidas, y su elección debe depender en última instancia de sus propias preferencias o las de su equipo.