如何将 Luxon DateTime 格式转换为字符串或数字？

Question

我正在使用以下代码设置 Luxon 时钟以供我的项目使用。

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;

现在，我在另一个地方使用这个组件来定义当前日期的月份#。

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'.

当我在控制台中打印它时，我得到了一个完整的 react.element 对象。我需要能够在getData()month 变量中使用“12”作为数字（12 月）。 如果需要，如何将此对象转换为数字类型或字符串类型？ 附言我尝试使用 pareInt()。不工作。

Answer 1

您应该将其移至custom React hook，而不是在 React 组件中包含此逻辑。这使您可以轻松地重用它的返回值。

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;

然后您可以将值作为字符串检索，以便将其传递给其他函数或渲染它。

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>;
};

Answer 2

由于您只是在组件中使用当前时间的月份，因此您可以使用
const month = DateTime.local().setZone(place?.timezone).toFormat('M')
添加 .reconfigure({ outputCalendar: calendar }) 和/或 .plus({ days: daysOffset })（如果需要）

Answer 3

尽管我仍然在 cmets 中倡导我的观点，但如果你想继续你选择的方式，我完全尊重。因此，如果您想访问组件的值，您可以通过调用将在您的案例中保存该值的子项来实现。

console.log(month.props.children) // will return 12 as string