javascript - 在组件卸载 Reactjs 之前更改 css 和状态

Question

我是新手，我需要在卸载组件之前更改 CSS 类，但是我的组件在卸载之前收到新的道具，并且 css 效果没有出现任何解决方案。提前致谢

     getNext=()=>{

    this.setState({
        isCardFadeOut: true
    })
    this.secondCard.current.classList.remove('second-card')
    this.secondCard.current.classList.add('main-card')
    this.thirdCard.current.classList.remove('third-card')
    this.thirdCard.current.classList.add('second-card')
    this.props.parent.getNext()

}

标签： javascriptreactjs

Answer 1

我使用 onTransitionEnd 事件监听器来调用

this.props.parent.getNext()

在 getNext() 上，我进行了 css 更改，其中包括转换，并使函数调用同步如下：

 <div ref={this.thirdCard} 
      onTransitionEnd={this.handleGetNext} 
      className="content-card third-card"/>


 handleGetNext = () => {
        this.props.parent.getNext()
    }


 getNext = () => {

        this.firstCard.current.classList.add('card-fading')
        this.secondCard.current.classList.remove('second-card')
        this.secondCard.current.classList.add('main-card')
        this.thirdCard.current.classList.remove('third-card')
        this.thirdCard.current.classList.add('second-card')


    }