如何在样式组件中使用 for 循环？

Question

我是一名正在努力学习 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;

Answer 1

我认为您的问题在于您正在使用您的功能并且没有正确提取道具。尝试重写这一位，以便首先使用道具作为内联函数的参数，然后在您的 createCSS 函数中使用它们。由于您在函数中使用 ES6 对象解构，因此无需列出参数，只需传递 props 对象即可：

${createCSS(
  `${props => props.total}`,
  `${props => props.start}`,
  `${props => props.end}`,
  `${props => props.day}`,
  `${props => props.schedules}`,
)}

对此：

${props => createCSS(props)}

或者你可以使用与上面完全相同的简写语法

${createCSS}

希望对您有所帮助！