React useState/useEffect更新类名后元素颜色未正常渲染问题

问题现象 #

实现电影卡片点击心形图标完成点赞/取消点赞交互时，使用useState()与useEffect()钩子开发出现异常：点击后DOM元素已被应用新的类名，但心形图标颜色未按预期切换。

复现代码 #

export function MovieCard2(props) {
 const [heartClassName, setHeartClassName] = useState("heart heart-white")


 useEffect(() => {
  console.log(ref.current)
  if(isLiked === false) {
    setHeartClassName("heart heart-white")
  } else {
    setHeartClassName("heart heart-red")
  }
}, [isLiked]);

return (
<>
  <div
    className={heartClassName}
    onClick={function (ev) {
      ev.stopPropagation();
      setLiked(!isLiked)
  >
    ❤
  </div>


  <style jsx>{`

    .heart {
      padding: 16px 0 auto auto;
    }
    .heart-white {
      color: white;
    }
    .heart-red {
      color: red;
    }
  `}</style>
</>
);
}

问题原因 #

1. 冗余状态设计：额外维护heartClassName状态完全没有必要，类名可以直接根据点赞状态推导，用useEffect监听状态再更新类名会触发多余重渲染，还容易出现状态不同步问题。
2. styled-jsx局部样式匹配问题：styled-jsx默认做样式隔离，只会给JSX中静态声明的类名加哈希匹配标识，动态切换的类名如果不加特殊处理，会出现DOM上类名存在，但无法匹配到局部样式规则的情况，直接表现就是样式不生效。
3. 代码存在多处基础错误：
   • 代码中isLiked、setLiked、ref均未在组件内声明，正常运行会直接抛出引用错误
   • .heart类的padding写法非法：padding属性不支持auto作为属性值，auto仅对margin生效
   • onClick回调存在JSX语法括号缺失问题

修复方案 #

优先推荐最简单的实现方式：移除冗余状态和多余类名逻辑，简单颜色切换直接用行内样式实现，完全避开styled-jsx动态类匹配问题，代码量更少更易维护：

import { useState } from 'react';

export function MovieCard2(props) {
  // 声明点赞状态，默认未点赞
  const [isLiked, setIsLiked] = useState(false);

  return (
    <>
      <div
        className="heart"
        // 直接通过行内样式根据状态切换颜色，不需要额外维护类名状态
        style={{ color: isLiked ? 'red' : 'white' }}
        onClick={function (ev) {
          ev.stopPropagation();
          setIsLiked(!isLiked)
        }}
      >
        ❤
      </div>

      <style jsx>{`
        .heart {
          /* 修正非法padding写法，用margin-left:auto实现靠右对齐 */
          margin-left: auto;
          padding: 16px 0;
          cursor: pointer;
          user-select: none;
        }
      `}</style>
    </>
  );
}

如果要坚持用类名控制样式，需要给动态类名加:global()标识让styled-jsx可以正确匹配，注意要控制全局类名作用域避免污染其他组件样式：

<style jsx>{`
  .heart {
    margin-left: auto;
    padding: 16px 0;
    cursor: pointer;
    user-select: none;
  }
  /* 动态类名加:global标识，前缀加父类限制作用域 */
  .heart:global(.heart-white) {
    color: white;
  }
  .heart:global(.heart-red) {
    color: red;
  }
`}</style>

内容的提问来源于stack exchange，提问作者Hai Na Zheng