React中的classNames的复杂条件

Question

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

我在处理复杂条件语句时遇到了一些小问题，如何渲染className。

我在名为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组件，我尝试添加类。 正如你所看到的，它不是理想的，因为当props.userChoseToMeetAlien和props.cupAndSaucerHaveArrived都是假时，full_position类被添加。

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

} 

我很感激任何帮助。由于

Answer 1

试试这个真棒库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> 
    ); 

}