Компоненты в стиле: Как я могу вращать значок SVG при нажатии?

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 в качестве логической настройки с обработчиком щелчка, чтобы вращаться при нажатии. Что я должен делать?

Answer 1

Из вашего примера неясно, как вы передаете "rotate" 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>
     );
   }
 }

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

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