如何在 Styled 组件中制作多个 onClick 动画？

Question

我有 2 个按钮，我想在单击时为每个按钮设置动画。问题是当点击第二个按钮时，动画会因为 React 重新渲染文档而重新启动。我该如何解决这个问题？我是 StyledComponents 的新手。

[这是一个有问题的代码框。] https://codesandbox.io/s/naughty-joliot-v3mlf

谢谢。

Answer 1

您应该将样式组件移出功能，然后将道具（active 和 active2）传递给样式组件。

这是你的示例代码，并进行一些修改：

https://codesandbox.io/s/tender-curran-0bxf0?file=/src/App.js