在React中通过className状态切换提示组件样式是否为最佳实践？

你提到的通过状态切换className（info__success/info__error）并在独立CSS文件中编写样式的方式，是非常标准且推荐的最佳实践。这种方式遵循关注点分离原则，将样式逻辑与业务逻辑解耦，后续扩展样式（比如增加内边距、圆角、文字样式等）时，维护成本远低于内联样式。

更简洁的优化实现 #

你原来的代码直接将类名存入状态，其实可以优化为存储语义化的状态标识（比如布尔值），让逻辑更清晰：

JSX 代码

import { useState } from 'react';
import './InfoMessage.css';

const InfoMessage = ({ message }) => {
  // 用布尔值维护状态，语义更明确
  const [isError, setIsError] = useState(true);

  // 切换状态的示例方法
  const toggleStatus = () => {
    setIsError(prev => !prev);
  };

  return (
    <>
      <button onClick={toggleStatus}>切换状态</button>
      <div className={`info ${isError ? 'info__error' : 'info__success'}`}>
        {message}
      </div>
    </>
  );
};

export default InfoMessage;

CSS 代码（InfoMessage.css）

/* 通用基础样式，统一复用 */
.info {
  padding: 10px 16px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
}

/* 错误状态样式 */
.info__error {
  background-color: #dc3545;
}

/* 成功状态样式 */
.info__success {
  background-color: #28a745;
}

复杂场景的可选方案 #

如果后续需要处理更多状态（如警告、提示），可以使用classnames库简化类名拼接（无需额外依赖的话，多条件三元表达式也能应付）：

import classNames from 'classnames';

// ...

<div className={classNames('info', {
  'info__error': isError,
  'info__success': !isError
})}>
  {message}
</div>

总结 #

这种「语义化状态控制类名+独立CSS文件」的方案，完全符合你的需求（避免JSX内写CSS、不用Tailwind），既保证了代码的可维护性，又让逻辑清晰易懂，是这类场景下的最优选择之一。

内容的提问来源于stack exchange，提问作者DisplayName