如何使用React动态添加/删除class来改变样式-优快云博客

本文介绍如何使用React根据商品的不同状态（下架、售完、有货）动态展示信息，并通过classnames模块优雅地处理元素样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

商品有三种状态：下架、售完、有货，判断是否有货，如果下架和售完需要显示没货的原因，如果有货则需要让将没货的样式删除。

var ShopItem=React.createClass({
render:function(){
	var itemstatus=this.props.itemstatus;
	var itemstatusword="";
	if (itemstatus=="takenOff"){

		itemstatusword="已下架";
	
	}else if(itemstatus=="soldOut"){
	
		itemstatusword="卖完了";
	
	}else if(itemstatus=="regular"){
		// 移除下面<div className="shopitem disableditem">的disableditem类
	}
	return(
		<div className="shopitem disableditem">
			<input type="checkbox"></input>
			<div className="itemshow">
				<div className="itempic"></div>
				<div className="itemstatus">{itemstatusword}</div>
			</div>
			<div className="itemname">
				{this.props.itemname}
			</div>
			<div className="iteminputbox">
				<div className="price">￥{this.props.price}</div>
				<input type="text"></input>
			</div>
		</div>
		);
}
复制代码

});

使用react推荐的classnames模块

var classNames = reuqire('classname');
var itemClasses = classNames({
    // default classname
   shopitem: true,
   // 根据props计算的class
   disableditem: itemstatus !== 'regular'
});

return (
    <div className={itemClasses} >
    ...
    </div>
);
复制代码