我是一个非常努力学习React的学生。
现在,我正在制定一个玩具项目时间表。
我使用CSS网格创建时间表。
但是它正在成为一个非常被动的程序。
我想在后端获取'schedules'变量并自动生成nth-of-type()
&:nth-of-type (i) {
grid-area: start / day / end / day + 1;
}
我想...我不知道如何。
帮帮我。谢谢。
这是我的代码。但它不起作用。 因为函数createCSS({total,start,end,day,schedules}) 不确定...
我该如何解决此代码?
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;
答案 0 :(得分:1)
我认为您的问题出在使用功能的地方,而道具提取不正确。尝试重写此位,以便首先使用props作为内联函数的参数,然后在createCSS函数中使用它们。由于您在函数中使用ES6对象分解,因此无需列出参数,只需传递props对象即可:
${createCSS(
`${props => props.total}`,
`${props => props.start}`,
`${props => props.end}`,
`${props => props.day}`,
`${props => props.schedules}`,
)}
对此:
${props => createCSS(props)}
或者您可以使用与上面完全相同的速记语法
${createCSS}
希望获得帮助!