javascript - React中className的复杂条件

我目前正在重写我的一个Web应用程序（使用jQuery和JavaScript制作）以使用React.js代替。

我在弄清楚如何使用复杂的条件语句时呈现类名时遇到了一些麻烦。

我的主要组件类AppContainer中有两个状态分别称为userChoseToMeetAlien和cupAndSaucerHaveArrived。

userChoseToMeetAlien和cupAndSaucerHaveArrived布尔值的初始状态设置为false，如下所示。

constructor(props) {
        super(props);
        this.state = {
        userChoseToMeetAlien: false,
        cupAndSaucerHaveArrived: false
    };
}

我有一个称为CupAndSaucer的无状态组件，这些状态（上述）作为属性传递。

我想根据这些属性的值向HTML添加不同的类（在CupAndSaucer中呈现）。

这是我希望工作方式的伪代码：

 if(props.userChoseToMeetAlien is true AND props.cupAndSaucerHaveArrived is false) then
     add the move_animation class
 else if(props.userChoseToMeetAlien is false AND props.cupAndSaucerHaveArrived is true)
     add the full_position class
 else
     //both properties are false
     should have no classes
 end

这是我尝试添加类的CupAndSaucer组件。
如您所见，这是不理想的，因为当full_position和props.userChoseToMeetAlien均为false时，添加了props.cupAndSaucerHaveArrived类。

const CupAndSaucer = function(props) {
    return (<div id="cup_and_saucer_container"
               className={((props.userChoseToMeetAlien === true  && props.cupAndSaucerHaveArrived === false) ? 'move_animation' : 'full_position')}>
        </div>
    );

}

我将不胜感激。谢谢

最佳答案

试试这个很棒的库https://github.com/JedWatson/classnames
像这样：

import cn from 'classnames';

const CupAndSaucer = function(props) {

    const className = cn('some-default-class', {
      'move_animation': (props.userChoseToMeetAlien === true  && props.cupAndSaucerHaveArrived === false),
      'full_position': (props.userChoseToMeetAlien === false  && props.cupAndSaucerHaveArrived === false)
    });
    return (<div id="cup_and_saucer_container"
               className={className}>
        </div>
    );

}