Constantemente encuentro este tipo de declaración de cambio en una base de código y no puedo encontrar documentación al respecto en ninguna parte. ¿Alguien sabe el nombre de esta sintaxis?
import React from 'react' enum Options { FirstOption = 'first', SecondOption = 'second' } export default function DisplayIcon({selectedOption: string}) { const clickFirst = () => { // do something } const clickSecond = () => { // do something } return ( <Wrapper> { { [Options.FirstOption]: ( <ClickableIcon onClick={ clickFirst }> <Icon type={ IconType.Frist } /> </ClickableIcon> ), [Options.SecondOption]: ( <ClickableIcon onClick={ clickSecond }> <Icon type={ IconType.Second } /> </ClickableIcon> ), }[selectedOption] } </Wrapper> ) }No es una declaración de switch en absoluto, aunque tiene razón, se usa para seleccionar un valor. Es un objeto literal con nombres de propiedad calculados. Por lo tanto, está construyendo un objeto, luego elige la propiedad que coincide con la opción selectedOption de ese objeto, todo en la misma expresión.
Aquí hay un ejemplo más simple de la parte literal del objeto con nombres de propiedad calculados:
const name1 = "a"; const name2 = "b"; const obj = { [name1]: "value for a", [name2]: "value for b", }; console.log(obj);Y aquí hay un ejemplo de lo que hace ese código al construir el objeto y luego tomar inmediatamente una de sus propiedades:
const name1 = "a"; const name2 = "b"; const pickOne = Math.random() < 0.5 ? name1 : name2; const pickedValue = { [name1]: "value for a", [name2]: "value for b", }[pickOne]; console.log(`Picked "${pickOne}": "${pickedValue}"`); FWIW, yo no lo haría de esa manera. Definiría el objeto una vez y lo reutilizaría, o usaría un switch o if / else if o similar en el código antes de la devolución.
Esto no es específico de JSX, y no es realmente una sintaxis particular, sino una combinación de múltiples. Vamos a simplificarlo un poco:
let result = { [Options.FirstOption]: 'hello', [Options.SecondOption]: 'goodbye', }[selectedOption]; Esto seleccionará 'hello' o 'goodbye' . Lo hace creando primero un objeto y luego buscando una propiedad en él. Podríamos agregar una variable intermedia como esta:
let options = { [Options.FirstOption]: 'hello', [Options.SecondOption]: 'goodbye', }; let result=options[selectedOption]; La sintaxis [...]: es solo para permitir que las claves mismas se definan en función de alguna otra variable, en lugar de una cadena literal. En su lugar, podríamos agregar propiedades una a la vez como esta:
let options = {}; options[Options.FirstOption] = 'hello'; options[Options.SecondOption] = 'goodbye'; let result=options[selectedOption];El resultado, como ya averiguaste, es equivalente a esto:
let result; if ( selectedOption === Options.FirstOption ) { result = 'hello'; } elseif ( selectedOption === Options.SecondOption ) { result = 'goodbye'; }