使用React styled-components处理onClick事件

Question

我是一名可以帮助您翻译文本的助手。

我有一个问题，我正在尝试创建一个记忆游戏网格，当我单击网格项时它会打开。 目前我有一个工作网格，但是我只能使用悬停来操作它，不知道如何在状态更改时使用点击事件使其工作。

基本上，我的网格项代码树是：

<Box onClick={this.handleOpenCard}>
  <Front />
  <Back>
    <img src="" alt="" />
  </Back>
</Box>

我的目标是，当我点击卡片时，将组件状态open更改为true。当这个状态为真时，我希望使用styled-components执行CSS动画，将卡片旋转180度。 请参见完整的组件代码，在那里当前工作时悬停在项目上，请给我一些想法如何实现或重构代码。

import React, { Component } from "react";
import styled from "styled-components";

const Box = styled.div`
    position: relative;
    perspective: 1000px;
`;

const Front = styled.div`
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    backface-visibility: hidden;
    border-radius: 10px;
    background-color: #fff;
    cursor: pointer;

    ${Box}:hover & {
        transform: rotateY(180deg);
    }

    img {
        width: 100%;
        max-width: 75px;
    }
`;
const Back = Front.extend`
    background-color: #ffeb3b;
    transform: rotateY(180deg);

    ${Box}:hover & {
        transform: rotateY(0deg);
    }
`;

class Card extends Component {
    state = {
        open: false
    };

    handleOpenCard = e => {
        this.setState({ open: true });
    };

    render() {
        return (
            <Box open={this.state.open} onClick={this.handleOpenCard}>
                <Front />
                <Back>
                    <img
                        src={
                            process.env.PUBLIC_URL +
                            `/images/svg/${this.props.path}`
                        }
                    />
                </Back>
            </Box>
        );
    }
}

export default Card;

- Sangsom

Answer 1

你可以非常轻松地在styled-components中访问props。

在你的Box中: transform: ${props => props.open ? rotateY(180deg) : rotateY(0deg)} 将props传递给子元素：

Front = styled.div`

`

Box = styled.div`
   ${Front} {
      transform: ${props => props.open ? rotateY(180deg) : rotateY(0deg)}
    }
`

- NiftyAsp

---

问题在于当我点击“Box”时，需要对“Front”和“Back”组件执行变换。这个动画在“Box”组件上不起作用。 - Sangsom

更新了我的答案，如果有帮助请告诉我。 - NiftyAsp

不行，这也不起作用。我设法让它工作的唯一方法是将“open”属性传递给“Front”和“Back”组件，然后在“Front”样式组件中调用${Box} & {transform: ${props => props.open ? "rotateY(180deg)" : "rotateY(0deg)"};}，但我认为这不是将相同的属性传递给两个组件的最合适方式。 - Sangsom