Javascript 如何向React中类组件中的事件侦听器添加样式？

我正在尝试制作一个带有事件监听器的动画汉堡菜单，该监听器可以加载。事件侦听器可以工作，但我切换的两种样式之间的转换不起作用。代码如下。我确信我在预设样式之间切换的方法是错误的，不管这是否是问题的一部分。谢谢

import ReactDOM from 'react-dom'
import '../style/Main.css'
import styled from "styled-components"

const originalBurger = styled.div`
    display: inline;
    div {
        background-color: #fcfcfc;
        height: 4px;
        width: 42px;
        margin: 10px;
        transition: all 0.3s ease forwards;
    }
`;

const animatedBurger = styled.div`
    display: inline;
    div {
        background-color: #000000;
        height: 4px;
        width: 42px;
        margin: 10px;
        transition: all 0.3s ease forwards;
        &:nth-child(1) {
            transform: rotate(45deg)
        }
        &:nth-child(2) {
            opacity: 0;
        }
        &:nth-child(3) {
            transform: rotate(315deg);
        }
    }
`;

let StyledBurger = originalBurger;

class Burger extends Component {
    componentDidMount() {
        ReactDOM.findDOMNode(this).addEventListener("click", () => {
            if (StyledBurger === animatedBurger) {
                StyledBurger = originalBurger;
                this.forceUpdate();
            } else if (StyledBurger === originalBurger) {
                StyledBurger = animatedBurger;
                this.forceUpdate();
            }
            this.componentDidMount();
        })
    }

    componentWillUnmount() {
        ReactDOM.findDOMNode(this).removeEventListener();
    }

    render() {
        return (
            <StyledBurger>
                <div />
                <div />
                <div />
            </StyledBurger>
        )
    }
}

export default Burger

从“react dom”导入ReactDOM
导入“../style/Main.css”
从“样式化组件”导入样式化
const originalBurger=styled.div`
显示：内联；
div{
背景色：#fcfc；
高度：4px；
宽度：42px；
利润率：10px；
过渡：所有0.3秒轻松前进；
}
`;
const animatedBurger=styled.div`
显示：内联；
div{
背景色：#000000；
高度：4px；
宽度：42px；
利润率：10px；
过渡：所有0.3秒轻松前进；
&：第n个孩子（1）{
变换：旋转（45度）
}
&：第n个孩子（2）{
不透明度：0；
}
&：第n个孩子（3）{
变换：旋转（315度）；
}
}
`;
设StyledBurger=原始汉堡；
类Burger扩展组件{
componentDidMount（）{
ReactDOM.findDOMNode（this.addEventListener）（“单击”，（）=>{
if（StyledBurger==动画汉堡）{
StyledBurger=原始汉堡；
这个.forceUpdate（）；
}else if（StyledBurger==原始汉堡）{
StyledBurger=动画汉堡；
这个.forceUpdate（）；
}
this.componentDidMount（）；
})
}
组件将卸载（）{
ReactDOM.findDOMNode（this.removeEventListener（）；
}
render（）{
返回(
)
}
}
导出默认汉堡

更新

使用已批准答案的帮助，并以此结束

import ReactDOM from 'react-dom'
import '../style/Main.css'
import styled from "styled-components"

const getActiveStyle = (props) =>  `
    &:nth-child(1) {
        transform: rotate(-45deg) translate(-10px, 12px)
    }
    &:nth-child(2) {
        opacity: 0;
    }
    &:nth-child(3) {
        transform: rotate(45deg) translate(-10px, -12px);
    }
`
const originalBurger = styled.div`
    display: inline;
    div {
        background-color: #fcfcfc;
        height: 6px;
        width: 50px;
        margin: 10px;
        transition: all 0.3s ease;
        ${(props) => props.isActive ? getActiveStyle(props) : ""}
    }
`;

let StyledBurger = originalBurger;

class Burger extends Component {
    constructor(){
        super();
        this.state = {
            isActive: false
        }
    }
    render() {
        return (
            <StyledBurger isActive={this.state.isActive} onClick={()=> this.setState({isActive: !this.state.isActive})}>
                <div />
                <div />
                <div />
            </StyledBurger>
        )
    }
}
export default Burger;

从“react dom”导入ReactDOM
导入“../style/Main.css”
从“样式化组件”导入样式化
const getActiveStyle=（道具）=>`
&：第n个孩子（1）{
变换：旋转（-45度）平移（-10px，12px）
}
&：第n个孩子（2）{
不透明度：0；
}
&：第n个孩子（3）{
变换：旋转（45度）平移（-10px，-12px）；
}
`
const originalBurger=styled.div`
显示：内联；
div{
背景色：#fcfc；
高度：6px；
宽度：50px；
利润率：10px；
过渡：所有0.3秒缓解；
${（props）=>props.isActive？getActiveStyle（props）：“”
}
`;
设StyledBurger=原始汉堡；
类Burger扩展组件{
构造函数（）{
超级（）；
此.state={
isActive:错误
}
}
render（）{
返回(
this.setState（{isActive:！this.state.isActive}）}>
)
}
}
出口默认汉堡；

有更好更简单的方法来实现它。 在样式组件中，可以有一个用于活动/非活动状态的道具。这里有记录： 代码可以如下所示：

import ReactDOM from 'react-dom'
import '../style/Main.css'
import styled from "styled-components"

const getActiveStyle = (props) =>  `
    &:nth-child(1) {
        transform: rotate(45deg)
    }
    &:nth-child(2) {
        opacity: 0;
    }
    &:nth-child(3) {
        transform: rotate(315deg);
    }
`
const originalBurger = styled.div`
    display: inline;
    div {
        background-color: props.isActive ? #000000 : #fcfcfc;
        height: 4px;
        width: 42px;
        margin: 10px;
        transition: all 0.3s ease forwards;
        ${(props) => props.isActive ? getActiveStyle(props) : ""}
    }
`;

let StyledBurger = originalBurger;

class Burger extends Component {
    constructor(){
        this.state = {
            isActive: false
        }
    }
    render() {
        return (
            <StyledBurger isActive={this.state.isActive} onClick={()=> this.setState({isActive: !this.state.isActive})}>
                <div />
                <div />
                <div />
            </StyledBurger>
        )
    }
}
export default Burger;

从“react dom”导入ReactDOM
导入“../style/Main.css”
从“样式化组件”导入样式化
const getActiveStyle=（道具）=>`
&：第n个孩子（1）{
变换：旋转（45度）
}
&：第n个孩子（2）{
不透明度：0；
}
&：第n个孩子（3）{
变换：旋转（315度）；
}
`
const originalBurger=styled.div`
显示：内联；
div{
背景色：props.isActive？#000000:#fcfc；
高度：4px；
宽度：42px；
利润率：10px；
过渡：所有0.3秒轻松前进；
${（props）=>props.isActive？getActiveStyle（props）：“”
}
`;
设StyledBurger=原始汉堡；
类Burger扩展组件{
构造函数（）{
此.state={
isActive:错误
}
}
render（）{
返回(
this.setState（{isActive:！this.state.isActive}）}>
)
}
}
出口默认汉堡；

您可以将火腿汉堡菜单的样式分离到一个CSS文件中，并创建一个状态，以在单击事件时更改样式，而不是

forceUpdate（）

为什么添加EventListener？为什么不在组件上放置一个onClick道具呢？