网格列长度

Question

我正在尝试渲染带有分页的工作时间表。每页最多应显示 8 列。目前，当该月的剩余天数大于八时，该表可以正确呈现所有页面。但是，当应用程序到达该月的最后一周时，它不会显示 8 列，而是呈现一个包含所有数据的长垂直列。

function ScheduleTable() {
    const daysPerPage = 7;
    const [currentPage, setCurrentPage] = useState(1);
    const [scheduleType, setScheduleType] = useState('L1');

    const handleScheduleTypeChange = (type) => {
        setScheduleType(type);
    };

    const date = new Date();
    // Get the first day of the current month
    const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
    // Calculate the last day of the current month
    const lastDayOfMonth = new Date(
        date.getFullYear(),
        date.getMonth() + 1,
        0
    ).getDate();

    const totalDays = lastDayOfMonth;

    // Calculate the starting index of the current page
    const startIndex = (currentPage - 1) * daysPerPage;
    // Calculate the ending index of the current page
    const endIndex = Math.min(startIndex + daysPerPage, totalDays);
    // Slice the month array to get only the days for the current page
    let month = generateMonth(firstDayOfMonth, totalDays).slice(
        startIndex,
        endIndex
    );
    const numCol =
        month.length >= daysPerPage ? daysPerPage + 1 : month.length + 1;

    console.log(numCol);
    const handleNextPage = () => {
        setCurrentPage(currentPage + 1);
    };

    const handlePrevPage = () => {
        setCurrentPage(currentPage - 1);
    };

    return (
        <div>
            <div
                className={`grid grid-cols-8 mx-5  font-ubuntu font-medium text-center  `}
            >
                <div className='px-6 py-3 text-white uppercase border border-black bg-capgeminiPrimaryBlue'>
                    Employee
                </div>

                {generateSchedule(month)}

                {generateUser(users, month, scheduleType)}
            </div>

我尝试了多种解决方案；我尝试将列数固定为八（grid-cols-8），并且该解决方案也有效，直到该月剩余的天数少于每页允许的列数

此外，该应用程序的行为很奇怪，解决方案之一是通过

grid-${month.length + 1}

动态设置列数，这实际上曾经完美地工作，但是，有时应用程序会崩溃并开始错误地显示表格，没有任何明显的原因。

Answer 1

根据这篇文章，问题显然出在顺风本身 如何动态填充 tailwindcss grid-cols-x 属性？

Tailwind 对引入的类执行优化，如果您没有在 html 中的任何位置使用该类，则它不包含这些类。