0
486
Vistas¿Cómo convertir el formato Luxon DateTime en cadenas o números?
Estoy usando el siguiente código para configurar un reloj Luxon para mi proyecto.
import { DateTime } from 'luxon'; import React, { useEffect, useState } from 'react'; interface IProps { timezone: string; format: string; calendar?: string; daysOffset?: number; } const LiveDateTime: React.FC<IProps> = ({ timezone, daysOffset, format, calendar, }) => { const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local()); useEffect(() => { const interval = setInterval(() => { setTimeLive( DateTime.local() .setZone(timezone) .reconfigure({ outputCalendar: calendar }) .plus({ days: daysOffset }) ); }, 1000); return () => clearInterval(interval); }, [timezone]); return <span>{timeLive?.toFormat(format)}</span>; }; export default LiveDateTime;Ahora, estoy usando este componente en otro lugar para definir el mes de la fecha actual.
const month = <LiveDateTime timezone={place?.timezone} format="M" />; // This returns '12' as a number in the UI (for December) console.log(month) getData(month); //this functions is supposed to return some data based on the given month. //I get an error instead on this line that says, 'Argument of type 'Element' is not assignable to parameter of type 'number'. Cuando imprimo esto en la consola, obtengo un objeto react.element completo. Necesito poder usar '12' como un número (para diciembre) en getData() para la variable de month . ¿Cómo puedo convertir este objeto en un tipo de número o tipo de cadena si es necesario? PD Intenté usar pareInt(). no funciona
3 Respuestas
Responde la pregunta0
Como solo está usando el mes de la hora actual en el componente, podría usar
const month = DateTime.local().setZone(place?.timezone).toFormat('M')
agregando un .reconfigure({ outputCalendar: calendar }) y/o .plus({ days: daysOffset }) si es necesario
0
En lugar de tener esta lógica en un componente de React, debe moverlo a un gancho de React personalizado . Esto le permite reutilizar fácilmente su valor de retorno como desee.
import { DateTime } from 'luxon'; import React, { useEffect, useState } from 'react'; const useLiveDataTime = ({ timezone, daysOffset, format, calendar, }: IProps) => { const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local()); useEffect(() => { const interval = setInterval(() => { setTimeLive( DateTime.local() .setZone(timezone) .reconfigure({ outputCalendar: calendar }) .plus({ days: daysOffset }) ); }, 1000); return () => clearInterval(interval); }, [timezone]); return timeLive?.toFormat(format); }; export default useLiveDataTime;Luego puede recuperar el valor como una cadena para poder pasarlo a otras funciones o representarlo.
import React from 'react'; import useLiveDataTime from '<path-to>/use-live-date-time'; const SomeComponent: React.FC = () => { const month = useLiveDataTime({ timezone: 'Europe/London', format: 'M' }); console.log(month); getData(month); return <span>{month}</span>; };0
Aunque sigo defendiendo mi opinión que está en los comentarios, respeto totalmente si quieres continuar por el camino que has elegido. Por lo tanto, si desea acceder al valor del componente, puede hacerlo llamando a los elementos secundarios que tendrán el valor en su caso.
console.log(month.props.children) // will return 12 as string