[英]Complex conditionals for classNames in React
我目前正在重写我的一个Web应用程序(使用jQuery和JavaScript制作)以使用React.js代替。
我在弄清楚如何使用复杂的条件语句时呈现类名称时遇到了一些麻烦。
我有两个状态称为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
组件。 如您所见,当props.userChoseToMeetAlien
和props.cupAndSaucerHaveArrived
均为false时,添加了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>
);
}
我将不胜感激。 谢谢
试试这个很棒的库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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.