图标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'} />;
}