已动态创建 ID 为 "sc-iseJRi" 的组件 styled.p

Question

大家晚上好，我需要一些帮助。我无法解决警告：

Keyframes.js:20 The component styled.p with the id of "sc-iseJRi" has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component.

在此 link ( https://pastebin.com/a0kMztfD ) 中是我如何使用样式化组件的示例。在一个复选框文件中，我拥有用于样式组件规则的所有函数，然后我在 App.js 文件中调用这些函数以将它们分配给一个常量变量以在 return() 中使用我该如何解决这个问题？它不会为我创建任何错误，但当然会创建一千个警告。

除了之前放的link，我还放了代码：

在cards.js中：

export function getCard(Card) {
 
    let fillMode = (Card.style === null) ? 'both' : Card.style.fillMode
    let duration = (Card.style === null) ? '1s' : Card.style.duration
 
    const tmp = keyframes`
 
                      from,to {
                                    width: ${Card.width};
                                    height: ${Card.height};
                                    background-color: ${Card.colorCard};
                                    background: linear-gradient(${Card.colorCard2}, ${Card.colorCard});
                                    box-shadow: 0 16px 16px -8px rgba(0,0,0,0.4);
                                    border-radius: 6px;
                                    overflow: hidden;
                                    position: relative;
                                    margin: ${Card.marginCard}; 
                      }
    `;
 
    const CardFinal = styled.div`
          animation: ${duration} ${tmp} ${fillMode};
    `;
 
    return CardFinal
}

在App.js中：

Const CardContainer = getCard(card1)
 
return (
    <CardContainer></CardContainer>
);

Answer 1

问题是您在 getCard 函数中创建了一个 styled.div。

消除此警告的方法是将 CardFinal 的创建移到 getCard 之外，并将 getCard 函数用于 return 任何 css 你想要的稍后生成并将它们作为道具传递。 Here's how you can pass props with styled-components.

这就是您的代码的样子

const CardFinal = styled.div`
  ${getAnimation}
`;

export function getCardProps(Card) {
  const fillMode = Card.style === null ? "both" : Card.style.fillMode;
  const duration = Card.style === null ? "1s" : Card.style.duration;

  const tmp = keyframes`
    from,to {
      width: ${Card.width};
      height: ${Card.height};
      background-color: ${Card.colorCard};
      background: linear-gradient(${Card.colorCard2}, ${Card.colorCard});
      box-shadow: 0 16px 16px -8px rgba(0,0,0,0.4);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
      margin: ${Card.marginCard}; 
    }
  `;

  return { fillMode, duration, tmp };
}

const getAnimation = ({ duration, tmp, fillMode }) => {
  return css`
    animation: ${duration} ${tmp} ${fillMode};
  `;
};

现在您只需将 getCardProps 函数用于 CardFinal 期望来自 getCardProps 的道具。

export default function App() {
  const cardProps = getCardProps({
    style: null,
    weight: "100px",
    height: "100px",
    colorCard: "grey",
    marginCard: "10px"
  });

  return (
    <CardFinal {...cardProps}>
      YO
    </CardFinal>
  );
}

Here's a codesandbox link of where you can try & play around to see how it works. 您还可以尝试取消注释 // const WarningDiv，它基本上复制了您遇到的警告，只是一个 return 是空的 styled.div

的基本函数

已动态创建 ID 为 "sc-iseJRi" 的组件 styled.p

The component styled.p with the id of "sc-iseJRi" has been created dynamically

components

compiler-warnings

flux

reactjs

styled-components