Javascript 安装日期fns依赖项后获取错误

使用>“npm安装日期fns--save”安装日期fns后，出现此错误

尝试导入错误：“日期fns”不包含默认导出（作为“日期fns”导入）

我寻找一些解决方案，我需要更改导入的名称，但仍然无法工作。有人能帮忙吗

这是我的密码

import React, { useState } from "react";
import dateFns from "date-fns";
import "./Calendar.scss";

const Calendar = () => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [selectedDate, setSelectedDate] = useState(new Date());
  const header = () => {
    const dateFormat = "MMMM YYYY";
    return (
      <div className="header row flex-middle">
        <div className="column col-start">
          <div className="icon" onClick={prevMonth}>
            chevron_left
          </div>
        </div>
        <div className="column col-center">
          <span>{dateFns.format(currentDate, dateFormat)}</span>
        </div>
        <div className="column col-end">
          <div className="icon" onClick={nextMonth}>
            chevron_right
          </div>
        </div>
      </div>
    );
  };
  const days = () => {
    const dateFormat = "ddd";
    const days = [];
    let startDate = dateFns.startOfWeek(currentDate);
    for (let i = 0; i < 7; i++) {
      days.push(
        <div className="column col-center" key={i}>
          {dateFns.format(dateFns.addDays(startDate, i), dateFormat)}
        </div>
      );
    }
    return <div className="days row">{days}</div>;
  };
  const cells = () => {
    const monthStart = dateFns.startOfMonth(currentDate);
    const monthEnd = dateFns.endOfMonth(monthStart);
    const startDate = dateFns.startOfWeek(monthStart);
    const endDate = dateFns.endOfWeek(monthEnd);
    const dateFormat = "D";
    const rows = [];
    let days = [];
    let day = startDate;
    let formattedDate = "";
    while (day <= endDate) {
      for (let i = 0; i < 7; i++) {
        formattedDate = dateFns.format(day, dateFormat);
        const cloneDay = day;
        days.push(
          <div
            className={`column cell ${
              !dateFns.isSameMonth(day, monthStart)
                ? "disabled"
                : dateFns.isSameDay(day, selectedDate)
                ? "selected"
                : ""
            }`}
            key={day}
            onClick={() => onDateClick(dateFns.parse(cloneDay))}
          >
            <span className="number">{formattedDate}</span>
            <span className="bg">{formattedDate}</span>
          </div>
        );
        day = dateFns.addDays(day, 1);
      }
      rows.push(
        <div className="row" key={day}>
          {" "}
          {days}{" "}
        </div>
      );
      days = [];
    }
    return <div className="body">{rows}</div>;
  };
  const nextMonth = () => {
    setCurrentDate(dateFns.addMonths(currentDate, 1));
  };
  const prevMonth = () => {
    setCurrentDate(dateFns.subMonths(currentDate, 1));
  };
  const onDateClick = (day) => {
    setSelectedDate(day);
  };
  return (
    <div className="calendar">
      <div>{header()}</div>
      <div>{days()}</div>
      <div>{cells()}</div>
    </div>
  );
};
export default Calendar;

import React，{useState}来自“React”；
从“日期fns”导入日期fns；
导入“/Calendar.scss”；
常量日历=（）=>{
const[currentDate，setCurrentDate]=useState（new Date（））；
const[selectedDate，setSelectedDate]=useState（新日期（））；
常量头=（）=>{
const dateFormat=“MMMM YYYY”；
返回(
雪佛龙左
{dateFns.format（currentDate，dateFormat）}
雪佛龙右
);
};
常数天数=（）=>{
const dateFormat=“ddd”；
常数天数=[]；
设startDate=dateFns.startOfWeek（当前日期）；
for（设i=0；i<7；i++）{
推(
{dateFns.format（dateFns.addDays（startDate，i），dateFormat）}
);
}
返回{天}；
};
常量单元格=（）=>{
const monthStart=dateFns.startOfMonth（当前日期）；
const monthEnd=dateFns.endOfMonth（monthStart）；
const startDate=日期fns.startOfWeek（月开始）；
const endDate=dateFns.endOfWeek（monthEnd）；
const dateFormat=“D”；
常量行=[]；
让天数=[]；
让天=开始日期；
设formattedDate=“”；
白天
{formattedDate}
{formattedDate}
);
天=日期fns.addDays（第1天）；
}
推(
{" "}
{天}{“}
);
天数=[]；
}
返回{rows}；
};
const nextMonth=（）=>{
setCurrentDate（日期fns.addMonths（当前日期，1））；
};
const prevMonth=（）=>{
setCurrentDate（日期fns.子月（当前日期，1））；
};
const onDateClick=（天）=>{
设置选定日期（天）；
};
返回(
{header（）}
{days（）}
{cells（）}
);
};
导出默认日历；

导入是原因。库不会导出单个“某物”

因此，您不能以这种方式导入它。以下是您应该如何使用它：

// just an example
import { format, startOfWeek, addDays, subDays } from 'date-fns'

// usage example
<div className="column col-center" key={i}>
    {format(addDays(startDate, i), dateFormat)}
</div>

也应该工作，您不需要在代码中进行任何其他更改

---

最后，对JS导入/导出进行了很好的解释。可能值得检查。）

谢谢，它是有效的，但我仍然收到这个错误“RangeError:使用

d

而不是

d

（在

d

）将月份的天数格式化为输入

太阳2021年4月25日00:00:00 GMT+0200（中欧夏季时间）

@aleks好的，检查接受的格式模式。我想说的是，在代码

const dateFormat=“d”

中的这一行，您需要将

d

（表示一年中的某一天，例如1100、364）替换为

d

（月份的第1-31天）

import * as dateFns from "date-fns";