ReactJS 的日历组件中禁用了几天

Question

希望你们都做得很好！

我一直在处理 ReactJS 中的日历挑战，并且遇到了一个我真的无法理解的问题，我正在从本地 API 获取天数，在该 API 中我使用 if 语句，如果当前日期月等于 JSON 文件中的日期或小于该数字然后返回启用按钮，否则返回禁用。

这是我面临的问题： 从 3 到 9 的日子被禁用，但我希望它们被启用，因为我希望用户能够点击它们。从 25 日到 31 日之后计数的天数被禁用，这是所需的输出，但不知何故它搞砸了，从 3 日到 9 日也花了前几天。

这是我正在使用的代码：

这是文本格式的代码：

if (date >= day.day) {
      return (
        <Grid item key={day.id}>
          <Button
            key={day.id}
            sx={{
              color: 'white',
              width: 150,
              height: 150,
              backgroundColor: 'primary.dark',
              '&:hover': {
                backgroundColor: 'primary.main',
                opacity: [0.9, 0.8, 0.7],
              },
            }}
          >
            {day.day}
          </Button>
        </Grid>
      );
    } else {
      return (
        <Grid item key={day.id}>
          <Button
            // Disabled attribute for the days that haven't passed
            disabled
            key={day.id}
            sx={{
              color: 'white',
              width: 150,
              height: 150,
              backgroundColor: 'primary.dark',
              '&:hover': {
                backgroundColor: 'primary.main',
                opacity: [0.9, 0.8, 0.7],
              },
            }}
          >
            {day.day}
          </Button>
        </Grid>
      );
    }

这是获取日期的代码：

这是我正在获取的 API 示例：

这里又是代码格式：

{
    "id": 1,
    "day": "1",
    "chocolateImage": "https://sugarfreelondoner.com/wp-content/uploads/2019/05/keto-milk-chocolate-150x150.jpg"
  },

有人知道如何解决这个问题吗？我在代码中做错了吗？

提前感谢您的任何回答，请多多关照

Answer 1

首先，您不需要if/else 语句，因为唯一改变的是disabled 属性。

你可以这样做：

        <Grid item key={day.id}>
          <Button
            disabled={date <= day.day}
            key={day.id}
            sx={{
              color: 'white',
              width: 150,
              height: 150,
              backgroundColor: 'primary.dark',
              '&:hover': {
                backgroundColor: 'primary.main',
                opacity: [0.9, 0.8, 0.7],
              },
            }}
          >
            {day.day}
          </Button>
        </Grid>

第二件事是，在您的 date 代码中，您有一个尾随 /。那会引起问题。 const date = ${current.getDate()}/ 可以是const date = current.getDate()

尝试删除结尾的/，看看是否能解决问题。