是因为className是一个静态属性,它不会随着组件状态的改变而自动更新。在React中,组件的状态变化会触发组件的重新渲染,但是className并不会自动更新。
要解决这个问题,可以通过以下几种方式:
render() {
const iconClassName = this.state.isActive ? 'active-icon' : 'inactive-icon';
return <i className={iconClassName}></i>;
}
import classNames from 'classnames';
render() {
const iconClassName = classNames({
'active-icon': this.state.isActive,
'inactive-icon': !this.state.isActive
});
return <i className={iconClassName}></i>;
}
import styled from 'styled-components';
const Icon = styled.i`
&.active-icon {
// active样式
}
&.inactive-icon {
// inactive样式
}
`;
render() {
return <Icon className={this.state.isActive ? 'active-icon' : 'inactive-icon'} />;
}
以上是解决图标className不会在状态更改时更新的几种常见方法。根据具体的项目需求和技术栈选择合适的方式来处理。对于React开发,可以考虑使用条件渲染、动态类名库或CSS-in-JS来解决这个问题。
关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体品牌商,无法给出具体的链接地址。但腾讯云提供了丰富的云计算服务,可以通过腾讯云官方网站或者搜索引擎来获取相关产品和文档信息。
领取专属 10元无门槛券
手把手带您无忧上云