javascript - 样式化组件 onClick 旋转元素

Question

我试图在单击时向元素添加旋转。每次我想点击元素时，元素应该旋转。我正在使用 CSS 变换属性旋转元素。波纹管是我的样式组件:

const IconButtonWrapper = styled.div`
  transform: rotate(0deg);
  overflow: hidden;
  transition: all 0.3s ease-out;
  ${({ rotate }) => rotate && `transform: rotate(360deg)`};
`;

我有渲染元素的 React 组件，并且有 onClick事件:

const IconButtonContainer = () => {
  const [rotate, setRotate] = useState(false);

  const handleClick = () =>
    setRotate(
      (prevState) => ({ rotate: !prevState.rotate }),
      () => console.log(this.state.rotate)
    );

  return (
    <IconButtonWrapper rotate={rotate} onClick={handleClick}>
      <IconButton />
    </IconButtonWrapper>
  );
};

当我第一次单击时，一切都按预期工作，但是当我第二次单击时，不再起作用。我觉得我应该回到默认状态 rotate: false过渡之后，但我如何在样式组件中做到这一点？
这是一个工作链接 Sandbox

Answer 1

技术上 rotate已经是 bool 值 所以prevState应该是 bool 值 以及。您还试图将对象设置为 rotate状态值而不是简单的 bool 值 .
基于此，您只需要否定 prevState而不是 prevState.rotate作为:

setRotate(prevState => !prevState)

查看来自!prevState.rotate的代码修改至 !prevState .
还建议阅读 Using the State Hook .它与类组件有点不同。