时间戳

首页 > 解决方案 > 如何选择具有特定值的？

javascript - 如何选择具有特定值的？

问题描述

我在反应中创建了一个日历，代码如下所示

import React, {Component, useRef} from 'react';
import './calendar.css';

function round(v) {
  return Math.ceil(v * Math.pow(10, 0)) / Math.pow(10, 0);
}

let year = new Date().getFullYear();
let months = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
];

function GenerateRows(month, calendar) {
    const inputEl = useRef("");
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus()
  };
  let rowsNeeded = round(calendar[month].length / 7);
  let rows = [];

  let delayBy = new Date(year, months.indexOf(month), 1).getDay();

    const myRef = React.createRef

    let day = 0
    let iteration = 0


  for (let i = 0; i < rowsNeeded; i++) {
    let row = [];

    for (let j = 0; j < 7; j++) {
            iteration++
            if(iteration < delayBy){
                row.push(<td className="spacer"></td>)
                continue
            }else{
                if(day === calendar[month].length){
                    row.push(<td className="spacer"></td>)
                }else{
                    day++
                    row.push(<td ref={myRef} onClick={onButtonClick}>{day}</td>)
                }
            }
        }

    rows.push(<tr>{row}</tr>);
  }

  return (
    <table>
      <tbody>{rows}</tbody>
    </table>
  );
}

export default function Week() {
  let calendar = {};

  months.forEach((month, index) => {
    let daysInMonth = new Date(year, index + 1, 0).getDate();

    calendar[month] = Array.from({ length: daysInMonth }, (_, i) => i + 1);

    console.log(month);
  });


  return (
        <div className="calendar">
            <div className="calendar-year">
                {months.map((month) => (
                    <div className='calendar-month'>
                        <span className='month-name'>{month.slice(0, 3)}</span>
                        {GenerateRows(month, calendar)}
                    </div>
                ))}
            </div>
        </div>
  );
}

这将显示全年的日历。现在我希望能够给一些具有特定值的元素一个类名。例如，1 月的 1 应该具有 className="red"。我该怎么做？我尝试过使用 refs，但还没有真正理解它。

日历看起来像这样

标签： javascripthtmlcssreactjs

解决方案

实现目标的一种方法是使用 CSS伪类，例如:first-child。

例如：

.calendar-month table tbody tr td:first-child {
  color: red;
}

您可以使用其他伪类来发挥创意，例如:nth-child()、:nth-last-child等。

但是，这可以根据您的要求进行限制，在这种情况下，您最好在代码中实现自定义逻辑。<td>此外，如果您有其他同级元素（例如空格为空等），则使其工作可能会有些困难。

因此，您可以使用的替代方法是在您的代码中实现它。

<td>请参见下面的示例，在每个月的第一天的元素上添加 className “red” 。

    for (let j = 0; j < 7; j++) {
            iteration++
            if(iteration < delayBy){
                row.push(<td className="spacer"></td>)
                continue
            }else{
                if(day === calendar[month].length){
                    row.push(<td className="spacer"></td>)
                }else{
                    day++
                    // a logic check for your requirement
                    const isFirstDay = day === 1;
                    // append a custom className when needed
                    row.push(<td className={isFirstDay ? "red" : ""} ref={myRef} onClick={onButtonClick}>{day}</td>)
                }
            }
        }

推荐阅读