我對 javascript 和 react 還很陌生，但我正在深入研究并創建我的第一個 react 應用程式。
我想通過一個變數修改我螢屏上顯示的“gridTemplateRows”的數量，并根據串列中的結果用新數字修改它（我現在已經將其硬編碼為 6），但是我正在使用 CSS 模塊，但我似乎無法讓網格更改其行數并正確顯示。
組件代碼
import classes from "./TimeSlot.module.scss";
import AvailabilityCalendarData from "../../../../../FakeDB/AvailabilityCalendarData";
function TimeSlot() {
const addTimeSlot = () => {
document.getElementsByClassName(
`${classes.time_interval}`
).styles.gridTemplateRows = "repeat(6, 1fr)";
};
const timeSlotRow = AvailabilityCalendarData.map((timeSlot) => (
<div key={timeSlot.id}>{timeSlot.startTime}</div>
));
return (
<div className={classes.time_interval} onLoad={addTimeSlot()}>
{timeSlotRow}
</div>
);
}
export default TimeSlot;
CSS
.time_interval {
grid-area: time;
display: grid;
grid-template-rows: repeat(17, 1fr);
font-size: 14px;
& > div {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
box-shadow: inset 0 1px 0 0 #eceff1;
}
}
uj5u.com熱心網友回復：
只需設定style：
<div className={classes.time_interval}
style={{ gridTemplateRows: `repeat(${timeSlotRow.length}, 1fr)` }}
>{timeSlotRow}</div>
或者你可以看看grid-auto-rows。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/386081.html
標籤：javascript css 反应 蠢货 css 模块