Javascript 如何在样式化组件中使用for循环？
我是一个非常努力学习的学生 现在，我正在做一个玩具项目的时间表 我使用css网格创建时间表 但它正在成为一个非常被动的计划 我想在后端获取'schedules'变量并自动生成第n个类型（） 我想。。。我不知道怎么做 帮帮我。多谢各位 这是我的密码。但它不起作用。 因为函数createCSS（{total，start，end，day，schedules}） 没有定义 如何修复此代码Javascript 如何在样式化组件中使用for循环？,javascript,reactjs,styled-components,Javascript,Reactjs,Styled Components,我是一个非常努力学习的学生 现在，我正在做一个玩具项目的时间表 我使用css网格创建时间表 但它正在成为一个非常被动的计划 我想在后端获取'schedules'变量并自动生成第n个类型（） 我想。。。我不知道怎么做 帮帮我。多谢各位 这是我的密码。但它不起作用。 因为函数createCSS（{total，start，end，day，schedules}） 没有定义 如何修复此代码 import React from 'react'; import styled, { css } from 'st
import React from 'react';
import styled, { css } from 'styled-components';
const Wrapper = styled.div``;
const Grid = styled.div`
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 40px;
width: 50%;
margin: 0 auto;
> div {
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
`;
function createCSS({ total, start, end, day, schedules }) {
let styles = '';
for (let i = 1; i <= length; i++) {
styles += `
&:nth-of-type(${i}){
grid-area: ${start} / ${day} / ${end} / ${day + 1} ;
grid-area: 1 / 1/ 1/ 2;
}
`;
}
return css`
${styles}
`;
}
const Subject = styled(Grid)`
> div {
/* &:nth-of-type(1) {
background: pink;
grid-area: 1 / 1 / 23 / 2;
display: grid;
} */
${createCSS(
`${props => props.total}`,
`${props => props.start}`,
`${props => props.end}`,
`${props => props.day}`,
`${props => props.schedules}`,
)}
}
`;
const ApplyMainPresenter = ({ schedules }) => {
return (
<Wrapper>
<Grid>
<div>
<span>Tuesday</span>
</div>
<div>
<span>Wednesday</span>
</div>
<div>
<span>Thursday</span>
</div>
<div>
<span>Friday</span>
</div>
<div>
<span>Saturday</span>
</div>
<div>
<span>Sunday</span>
</div>
</Grid>
{schedules.map(schedule => (
<Subject
key={schedule.id}
start={schedule.start}
end={schedule.end}
day={schedule.day}
total={schedules.length}
schedules={schedules}
>
<div>
<span>{schedule.title}</span>
<span>{schedule.start}</span>
<span>{schedule.end}</span>
<span>{schedule.day}</span>
</div>
</Subject>
))}
</Wrapper>
);
};
export default ApplyMainPresenter;
import React from 'react';
import styled from 'styled-components';
const Wrapper = styled.div``;
const Grid = styled.div`
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-auto-rows: 40px;
width: 50%;
margin: 0 auto;
> div {
background: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
`;
const Subject = styled(Grid)`
> div {
&:nth-of-type(1) {
background: pink;
grid-area: 1 / 1 / 23 / 2;
display: grid;
> div {
}
}
&:nth-of-type(2) {
background: yellow;
grid-area: 17 / 2 / 22 / 3;
}
&:nth-of-type(3) {
background: green;
grid-area: 17 / 3 / 22 / 4;
}
&:nth-of-type(4) {
background: skyblue;
grid-area: 17 / 4 / 23 / 5;
}
}
`;
const ApplyMainPresenter = ({ schedules }) => {
return (
<Wrapper>
<Grid>
<div />
<div>
<span>Tuesday</span>
</div>
<div>
<span>Wednesday</span>
</div>
<div>
<span>Thursday</span>
</div>
<div>
<span>Friday</span>
</div>
<div>
<span>Saturday</span>
</div>
<div>
<span>Sunday</span>
</div>
</Grid>
<Subject>
<div>
<div>
<span>10:00 ~ 10:30</span>
</div>{' '}
<div>
<span>10:30 ~ 11:00</span>
</div>{' '}
<div>
<span>11:00 ~ 11:30</span>
</div>{' '}
<div>
<span>11:30 ~ 12:00</span>
</div>{' '}
<div>
<span>12:00 ~ 12:30</span>
</div>{' '}
<div>
<span>12:30 ~ 13:00</span>
</div>{' '}
<div>
<span>13:00 ~ 13:30</span>
</div>{' '}
<div>
<span>13:30 ~ 14:00</span>
</div>{' '}
<div>
<span>14:00 ~ 14:30</span>
</div>{' '}
<div>
<span>14:30 ~ 15:00</span>
</div>{' '}
<div>
<span>15:00 ~ 15:30</span>
</div>{' '}
<div>
<span>15:30 ~ 16:00</span>
</div>{' '}
<div>
<span>16:00 ~ 16:30</span>
</div>{' '}
<div>
<span>16:30 ~ 17:00</span>
</div>{' '}
<div>
<span>17:00 ~ 17:30</span>
</div>{' '}
<div>
<span>17:30 ~ 18:00</span>
</div>{' '}
<div>
<span>18:00 ~ 18:30</span>
</div>{' '}
<div>
<span>18:30 ~ 19:00</span>
</div>{' '}
<div>
<span>19:00 ~ 19:30</span>
</div>{' '}
<div>
<span>19:30 ~ 20:00</span>
</div>{' '}
<div>
<span>20:00 ~ 20:30</span>
</div>{' '}
<div>
<span>20:30 ~ 21:00</span>
</div>
</div>
{schedules.map(schedule => (
<div key={schedule.id}>
<span>{schedule.title}</span>
</div>
))}
</Subject>
</Wrapper>
);
};
export default ApplyMainPresenter;
从“React”导入React；
导入样式化，{css}来自“样式化组件”；
const Wrapper=styled.div``；
const Grid=styled.div`
显示：网格；
网格模板列：重复（7，1fr）；
网格自动行：40px；
宽度：50%；
保证金：0自动；
>div{
背景：黑色；
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
`;
函数createCSS（{total，start，end，day，schedules}）{
让样式=“”；
for（设i=1；i div{
/*&：第n种类型（1）{
背景：粉红色；
网格面积：1/1/23/2；
显示：网格；
} */
${createCSS(
`${props=>props.total}`，
`${props=>props.start}`，
`${props=>props.end}`，
`${props=>props.day}`，
`${props=>props.schedules}`，
)}
}
`;
const ApplyMainPresenter=（{schedules}）=>{
返回(
星期二
星期三
星期四
星期五
星期六
星期日
{schedules.map（schedule=>(
{附表.标题}
{schedule.start}
{schedule.end}
{计划日}
))}
);
};
导出默认ApplyMainPresenter；
从“React”导入React；
从“样式化组件”导入样式化；
const Wrapper=styled.div``；
const Grid=styled.div`
显示：网格；
网格模板列：重复（7，1fr）；
网格自动行：40px；
宽度：50%；
保证金：0自动；
>div{
背景：黑色；
颜色：白色；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
`;
const Subject=styled（网格）`
>div{
&：第n种类型（1）{
背景：粉红色；
网格面积：1/1/23/2；
显示：网格；
>div{
}
}
&：第n种类型（2）{
背景：黄色；
网格面积：17/2/22/3；
}
&：第n种类型（3）{
背景：绿色；
网格面积：17/3/22/4；
}
&：第n种类型（4）{
背景：天蓝色；
网格面积：17/4/23/5；
}
}
`;
const ApplyMainPresenter=（{schedules}）=>{
返回(
星期二
星期三
星期四
星期五
星期六
星期日
10:00 ~ 10:30
{' '}
10:30 ~ 11:00
{' '}
11:00 ~ 11:30
{' '}
11:30 ~ 12:00
{' '}
12:00 ~ 12:30
{' '}
12:30 ~ 13:00
{' '}
13:00 ~ 13:30
{' '}
13:30 ~ 14:00
{' '}
14:00 ~ 14:30
{' '}
14:30 ~ 15:00
{' '}
15:00 ~ 15:30
{' '}
15:30 ~ 16:00
{' '}
16:00 ~ 16:30
{' '}
16:30 ~ 17:00
{' '}
17:00 ~ 17:30
{' '}
17:30 ~ 18:00
{' '}
18:00 ~ 18:30
{' '}
18:30 ~ 19:00
{' '}
19:00 ~ 19:30
{' '}
19:30 ~ 20:00
{' '}
20:00 ~ 20:30
{' '}
20:30 ~ 21:00
{schedules.map（schedule=>(
{附表.标题}
))}
);
};
导出默认ApplyMainPresenter；
${createCSS(
`${props => props.total}`,
`${props => props.start}`,
`${props => props.end}`,
`${props => props.day}`,
`${props => props.schedules}`,
)}
${props => createCSS(props)}
${createCSS}
希望对您有所帮助！可能是重复的谢谢！我也使用了该页面。但它不适合我。。。
${createCSS}