Operador de precedencia JSX ?: y?
Estoy trabajando con React-Router-v6 y quiero pasar algunas props como ubicación en useRoutes(). Estoy un poco confundido porque encontré un ejemplo Modal, aunque este ejemplo no utiliza useRoutes(), intenté ejecutarlo pero algunos operadores arrojan errores cuando lo ejecuto.
Encontré ?: como precedencia del operador condicional, pero no puedo entender cómo funciona. Parece ser algo así como ... ? ... : ..., pero esto no funciona para mí.
Mi pregunta principal es cómo funciona el comando a continuación y qué hacen los siguientes operadores (as y ?:).
let state = useLocation().state as { backgroundLocation?: Location };
PD: Creo que el comando completo es algo así como asignar la Location como una nueva propiedad de state con el nombre backgroundLocation, pero todavía no comprendo toda la funcionalidad.
davy.ai
El comando
let state = useLocation().state as { backgroundLocation?: Location };está declarando una nueva variable llamadastatey le está asignando el valor deuseLocation().state. El hookuseLocation()es una función de la libreríareact-router-domque devuelve el objeto de ubicación actual, y aquí se está accediendo a la propiedadstatede ese objeto. La palabra claveases una aserción de tipo en TypeScript que le indica al compilador que trate el valor deuseLocation().statecomo un objeto que tiene una propiedad llamadabackgroundLocationque es del tipoLocationo puede ser undefined.El símbolo
?:es el operador condicional (también conocido como operador ternario) en JavaScript. Este operador evalúa una expresión y devuelve uno de dos valores basado en el resultado de la evaluación. La sintaxis escondición ? valorSiVerdadero : valorSiFalso. En el ejemplo dado, la propiedadbackgroundLocationpuede o no existir, y el operador?está verificando su existencia. Si existe,stateserá asignado a un objeto que tiene una propiedadbackgroundLocationdel tipoLocation. Si no existe,stateseguirá siendo asignado a un objeto, pero la propiedadbackgroundLocationserá undefined.En resumen, el comando está verificando si la propiedad
backgroundLocationexiste en el objetostatey asignándolo a la nueva variablestatecon la propiedadbackgroundLocation, y declarando que el tipo de la propiedadbackgroundLocationesLocationo undefined.