反应动态创建的样式组件

Question

我是 React 样式组件的新手，我在动态创建时钟时遇到问题，时钟的初始度数为分钟（分钟度数），初始度数为小时（ 小时度数)。

这是我到目前为止所取得的成就，但我收到以下消息：

Keyframes.js:20 id为“...”的组件styled.div已动态创建。您可能会看到此警告，因为您在另一个组件中调用了样式。要解决此问题，只需在任何渲染方法和函数组件之外创建新的 StyledComponents。

应用代码

function App() {

  return (
    <div className="App">
      <main>
        <div className="clock-wrap">
          <section className="firstMinute">
            {numbers[0].map((coord, index) => {
              return (
                <Clock
                  key={index}
                  hourDegrees={coord[0]}
                  minuteDegrees={coord[1]}
                />
              );
            })}
          </section>

          <section className="secondMinute">
            {numbers[1].map((coord, index) => {
              return (
                <Clock
                  key={index}
                  hourDegrees={coord[0]}
                  minuteDegrees={coord[1]}
                />
              );
            })}
          </section>
        </div>
      </main>
    </div>
  );
}

但我无法解决这个问题，因为据我所知，我创建了单独的组件，并将信息作为 props 传递。

import styled from 'styled-components'
    
   export default function Clock ({ minuteDegrees, hourDegrees, index}) { 

const finalHourDegrees = Number(hourDegrees + 360)
const finalMinuteDegrees = Number(minuteDegrees + 360)

  const StyledClock = styled.div`
  width: 10vh;
  `

  //hour
  const animationHour = keyframes`
  from {
    transform: rotate(${props => props.hourDegrees}deg);
  }
  to {
    transform: rotate(${finalHourDegrees}deg);
  }
  `
  const HourStyled = styled.div`
    animation: ${animationHour} 4s ease-out infinite;
  `


  //minutes
  const animationMinute = keyframes`
  from {
    transform: rotate(${props => props.minuteDegrees}deg);
  }
  to {
    transform: rotate(${finalMinuteDegrees}deg);
  }
  `


  const MinuteStyled = styled.div`
    
    animation: ${animationMinute} 4s ease-out infinite;
  `

return(
    <StyledClock className={index}>
      <HourStyled className={hourDegrees} key={index} hourDegrees={hourDegrees}/>
      <MinuteStyled className={minuteDegrees} key={index} minuteDegrees={minuteDegrees}/>
    </StyledClock>
)

}

非常感谢！

Answer 1

您可以在目标组件之外创建 StyledClock 或 MinuteStyled 样式组件。此外，如果需要，您可以将道具发送到样式化组件。

更新我在下面分叉了你的代码并通过使用关键帧的回调函数来传递动态度数进行了更新codesandbox

const StyledComponent = styled.div`
  background: ${props => props.background};
`;

时钟

const StyledClock = styled.div`
  width: 6vw;
`;

export default function Clock({ minuteDegrees, hourDegrees, index }) {
  return (
    <StyledClock className={index}>
      <Hours index={index} hourDegrees={hourDegrees} />
      <Minutes index={index} minuteDegrees={minuteDegrees} />
    </StyledClock>
  );
}

分钟

const animationMinute = keyframes`
from {
  transform: rotate(${(props) => props.minuteDegrees}deg);
}
to {
  transform: rotate(${(props) => props.finalMinuteDegrees}deg);
}
`;

const MinuteStyled = styled.div`
  animation: ${animationMinute} 4s ease-out infinite;
`;

export default function Minutes({ minuteDegrees, index }) {
  const finalMinuteDegrees = Number(minuteDegrees + 360);

  return (
    <MinuteStyled
      className={minuteDegrees}
      key={index}
      minuteDegrees={minuteDegrees}
      finalMinuteDegrees={finalMinuteDegrees}
    />
  );
}

反应动态创建的样式组件

react styled component created dynamically

keyframe

reactjs

styled-components