reactjs - gridArea 使用变量反应内联样式
问题描述
我正在尝试返回一些 div 并将它们动态地放置在网格中。我以前从未尝试过,我认为我的语法可能不正确。没有一个div出现。模板正在工作,div 当前应该填充网格容器并使用按钮将其变为黑色。
export const DayColumn = ({ day }) => {
const { timeColumn } = useTableContext();
return (
<Wrapper gridInterval={timeColumn.length}>
<h2>{day}</h2>
{timeColumn.forEach((_, index) => {
index++;
return (
<div
key={index}
className='task-slot'
style={{ gridArea: `${index + 1} / 1 / ${index + 2} / 2;` }}
>
<h1>text</h1>
<BsPlusSquareFill />
</div>
);
})}
</Wrapper>
);
};
样式化的组件
const Wrapper = styled.div`
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: ${(props) => `100px repeat(${props.gridInterval}, 1fr);`};
grid-gap: 3px;
background-color: var(--clr-background-dark3);
border-radius: 7px;
h2 {
justify-self: center;
font-family: 'Oswald', sans-serif;
letter-spacing: 4px;
font-size: 2rem;
font-weight: 200;
color: var(--clr-text-light);
text-transform: capitalize;
}
.task-slot {
height: 100%;
width: 100%;
background-color: black;
}
`;
解决方案
我修好了它。需要使用map
而不是forEach
推荐阅读
- java - Java - 取两个字符串并组合成一个日期对象
- python - 如何在 OpenCV 中逼近具有固定角度多边形的形状?
- java - 为什么我的图形点不显示?(Java 绘图问题)
- hyperledger-fabric - 无法运行对等
- python - Python不断损坏并需要重新安装
- node.js - 如何用 babel 和 node 14 构建?
- c# - 在 IMemoryCache 上调用扩展方法 GetOrCreateAsync 时是否可以避免缓存?
- css - 如何创建直线边框
- docker - 如何在 docker 容器内从主机中查找卷文件?
- database - 无法在 mongo shell 的其他集合中分配自生成的 _id 作为参考