styled-components - 样式化组件 : How can I rotate an svg icon on click?

Question

const IconButtonWrapper = styled((props: IconWrapperProps) => {
    return <IconButton {...props} />;
})`
    float: right;
    transform: rotate(0deg);
    overflow: hidden;
    transition: all 0.3s ease-out;
    ${(props) =>
        props.rotate &&
        css`
            transform: rotate(180deg);
        `};
`;

现在，我正在尝试使用它，但它并不完全正确。我目前有 props.rotate 作为 bool 设置，带有一个单击处理程序以在单击时旋转。我该怎么办？

Answer 1

从您的示例中不清楚您如何将“旋转” Prop 传递给样式化组件，因此我对您的代码进行了一些重构并添加了一个容器组件来保持旋转状态: https://codesandbox.io/s/wyx6pqj13w

希望这会有所帮助!

此处显示链接中的代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import './styles.css';

const IconButton = () => <button>Icon</button>;

const IconButtonWrapper = styled.div`
  float: right;
  transform: rotate(0deg);
  overflow: hidden;
  transition: all 0.3s ease-out;
  transform: ${(props) => (props.rotate ? `rotate(180deg)` : '')};
`;

class IconButtonContainer extends Component {
  state = {
    rotate: false,
  };

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

  render() {
    return (
      <IconButtonWrapper rotate={this.state.rotate} onClick={this.handleClick}>
        <IconButton />
      </IconButtonWrapper>
    );
  }
}

const App = () => {
  return (
    <div className="App">
      <IconButtonContainer />
    </div>
  );
};

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);