React 中类名的复杂条件

Question

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

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

我的主组件 class AppContainer 中有两个状态 userChoseToMeetAlien 和 cupAndSaucerHaveArrived。

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

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

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

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

这是我希望事情如何工作的伪代码：

 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 组件，我试图在其中添加 classes。如您所见，它并不理想，因为当 props.userChoseToMeetAlien 和 props.cupAndSaucerHaveArrived 都为 false 时添加了 full_position class。

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>
    );

}

React 中类名的复杂条件

Complex conditionals for classNames in React

javascript

conditional

if-statement

reactjs