Question

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

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

我的主要组件类中有两个名为userChoseToMeetAlien和cupAndSaucerHaveArrived的状态，名为AppContainer。

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都为假时添加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>
    );

}

我很感激任何帮助。感谢

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中classNames的复杂条件

1 个答案: