css - 卸载组件时如何向呈现的 JSX 元素添加新的 CSS 类

Question

在这个组件中，div 已成功进入带有动画的 DOM。现在，当我从 DOM 中删除它们时，我想实现一个动画 - 但它不起作用。这个想法是在 JSX 元素中添加另一个类，当它被删除时——但是这个添加对我不起作用。任何帮助将不胜感激。这是我的代码：

import React, {Component} from 'react';
import PropTypes from 'prop-types';

import classes from './BurgerIngredient.css';

class BurgerIngredient extends Component {

  state={
      meat: <div className={classes.Meat}></div>,
      cheese: <div className={classes.Cheese}></div>,
      bacon: <div className={classes.Bacon}></div>,
      salad: <div className={classes.Salad}></div>
  }

  componentWillUnmount(){
//HERE I'M TRYING TO ADD '.removeBaconMeat' CLASS FOR THE 'MEAT' DIV, BUT IT'S NOW WORKING.
//THE GOAL WAS TO ADD'.removeBaconMeat' CLASS TO THE DIV SO IT WILL ADD ANOTHER ANIMATION WHEN THIS COMPONENT ( = DIV ELEMENT) IS UNMOUNTING (=REMOVED FROM DOM)
      if(this.props.type === 'meat'){
         const removedMeat = {...this.state.meat};
         removedMeat.props.className = removedMeat.props.className + ' ' + classes.removeBaconMeat;
         this.setState({meat: removedMeat});
      }
  }


  render(){
    let ingredient = null;
    switch(this.props.type){
        case ('bread-bottom'):
            ingredient = <div className={classes.BreadBottom}></div>;
            break;
        case ('bread-top'):
            ingredient = (
                <div className={classes.BreadTop}>
                    <div className={classes.Seeds1}></div>
                    <div className={classes.Seeds2}></div>
                </div>
            );
            break;
        case('meat'):
            ingredient = this.state.meat;
            break;
        case('cheese'):
            ingredient = this.state.cheese;
            break;
        case('bacon'):
            ingredient = this.state.bacon;
            break;
        case('salad'):
            ingredient = this.state.salad;
            break;
        default:
            ingredient = null;    
    }
    
    return ingredient;
    }
};

BurgerIngredient.propTypes = {
    type: PropTypes.string.isRequired
}

export default BurgerIngredient;

标签： cssreactjscss-animations