如何使用React动态添加/删除class来改变样式

1,703 阅读1分钟

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

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