NextJS：将 className 函数转换为样式化的组件代码

Question

所以我正在观看视频教程并拥有这样的代码，但是由于我使用的是样式组件，所以我对如何在样式组件代码中添加 statusClass(0) 感到困惑

这是我的脚本：

像这样的造型

const HasDone = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const InProggress = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: inProgress 1s ease infinite alternate;

  @keyframes inProgress {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;

const Undone = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.3;

`;

在这里调用它也使它的功能与视频相同

const Order = () => {
 const status = 0;

 const StatusClass = (index) => {
   if (index - status < 1) return HasDone;
   if (index - status === 1) return InProggress;
   if (index - status > 1) return Undone;
 };

 return (
   <Container>
     <Left>
       <Row>
         .....
       </Row>
       <Row>
         <StatusClass>
           <PaymentOutlined
             style={{ color: "black", width: "30", height: "30" }}
           />
           <span>Payment</span>
           <CheckedIcon>
             <CheckBoxOutlined
               style={{ color: "black", width: "30", height: "30" }}
             />
           </CheckedIcon>
         </StatusClass>

如您所见，因为我正在使用 styled-components 也更改了 HTML 元素。

如果我尝试这样改变

<StatusClass(0)>

它给我一个错误，我该如何将其转换为样式组件？

Answer 1

您现在调用 StatusClass 的方式将导致对象错误，因为 React 不允许对象成为有效组件。 This article can help understand that error better. However, to answer your question, you can just set a component equal to whichever index you want, and define that index via props (as i did in my example) or state. Here is a stackblitz 可能会有帮助。

NextJS：将 className 函数转换为样式化的组件代码

NextJS: Convert className function into styled components code

javascript

reactjs

styled-components

next.js