javascript - Complex conditionals for classNames in React - Stack Overflow

admin管理员组

文章数量:1421272

I am currently re-writing one of my Web applications (made using jQuery and JavaScript) to use React.js instead.

I am having a little trouble figuring out how to render classNames when working with a plex conditional statement.

I have two states called userChoseToMeetAlien and cupAndSaucerHaveArrived in my main ponent class called AppContainer.

The initial state of the userChoseToMeetAlien and cupAndSaucerHaveArrived booleans are set to false as follows.

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

I have a stateless ponent called CupAndSaucer and these states (mentioned above) are passed in as properties.

I would like to add different classes to the HTML (rendered in CupAndSaucer) depending on the values of these properties.

Here is the pseudocode of how I would like things to work:

 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

Here is my CupAndSaucer ponent where I have attempted to add the classes. As you can see it is not ideal as the full_position class is added when both props.userChoseToMeetAlien and props.cupAndSaucerHaveArrived are false.

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

}

I'd appreciate any help. Thanks

I am currently re-writing one of my Web applications (made using jQuery and JavaScript) to use React.js instead.

I am having a little trouble figuring out how to render classNames when working with a plex conditional statement.

I have two states called userChoseToMeetAlien and cupAndSaucerHaveArrived in my main ponent class called AppContainer.

The initial state of the userChoseToMeetAlien and cupAndSaucerHaveArrived booleans are set to false as follows.

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

I have a stateless ponent called CupAndSaucer and these states (mentioned above) are passed in as properties.

I would like to add different classes to the HTML (rendered in CupAndSaucer) depending on the values of these properties.

Here is the pseudocode of how I would like things to work:

 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

Here is my CupAndSaucer ponent where I have attempted to add the classes. As you can see it is not ideal as the full_position class is added when both props.userChoseToMeetAlien and props.cupAndSaucerHaveArrived are false.

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

}

I'd appreciate any help. Thanks

• javascript
• reactjs
• if-statement
• conditional-statements

Share Improve this question Follow asked Jul 23, 2017 at 13:14 SarahSarah 2,00333 gold badges2626 silver badges4040 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try this awesome library https://github./JedWatson/classnames Something like this:

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

}

本文标签： javascriptComplex conditionals for classNames in ReactStack Overflow