React组件修改CSS类后样式未更新的问题排查及解决

问题场景 #

开发React TodoItem组件时，期望勾选复选框后修改组件边框颜色，但勾选后样式无变化。初始代码如下：

App.jsx #

import './App.css'
import './components/TodoItem/TodoItem.jsx'
import TodoItem from './components/TodoItem/TodoItem.jsx'

function App() {
  return (
    <>
      <TodoItem taskName={'Clean House'} statusInit={true} ></TodoItem>
      <TodoItem taskName={'Read Book'} statusInit={false} ></TodoItem>
      <TodoItem taskName={'Clean Bed'} statusInit ={true} ></TodoItem>
    </>
  )
}

export default App

TodoItem.jsx #

import "./TodoItem.css";
import { useState } from "react";

function TodoItem({ taskName, statusInit }) {

  const [status, setStatus] = useState(statusInit);
  const [count, setCount] = useState(0);
  let myClass = statusInit ? 'done' : 'todo-item'
 

  function checkBoxOnChange(e) {
    setStatus(e.target.checked);
    setCount(count + 1);
    statusInit = e.target.checked;
    myClass = statusInit ? 'done' : 'todo-item'
  }
  return (
    <>
      <main className={myClass}>
        <input 
          checked={status}
          type="checkbox"
          onChange={checkBoxOnChange}
          id="todo-item-status"
        />
        <p>{`${status}`}</p>
        <p>{taskName}</p>
        <p>{count}</p>
      </main>
    </>
  );
}

export default TodoItem;

TodoItem.css #

.todo-item{
    width: 300px;
    margin: 16px;
    padding: 16px; 
    border: solid royalblue 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}

.done{
    width: 300px;
    margin: 16px;
    padding: 16px; 
    border: solid green 2px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
}

已尝试将myClass设为state后样式正常更新，但需明确初始代码的错误原因及更优解决方式。

错误原因 #

1. 普通变量无法触发组件重渲染：myClass是普通JavaScript变量，React不会追踪其变化。即便在checkBoxOnChange中修改了myClass的值，组件也不会重新渲染，页面上的className不会更新，样式自然无变化。
2. 直接修改props违反React规则：statusInit是父组件传递的props，React中props为只读属性，直接赋值修改（statusInit = e.target.checked）无实际作用，还会导致逻辑混乱。

解决方案 #

方案1：基于现有state动态计算className（推荐） #

无需额外维护myClass状态，直接利用已有的status状态实时计算className，代码更简洁且避免冗余状态：

import "./TodoItem.css";
import { useState } from "react";

function TodoItem({ taskName, statusInit }) {
  const [status, setStatus] = useState(statusInit);
  const [count, setCount] = useState(0);

  function checkBoxOnChange(e) {
    const isChecked = e.target.checked;
    setStatus(isChecked);
    setCount(prevCount => prevCount + 1); // 函数式更新避免闭包问题
  }

  // 基于status实时计算className
  const myClass = status ? 'done' : 'todo-item';

  return (
    <>
      <main className={myClass}>
        <input 
          checked={status}
          type="checkbox"
          onChange={checkBoxOnChange}
          id="todo-item-status"
        />
        <p>{`${status}`}</p>
        <p>{taskName}</p>
        <p>{count}</p>
      </main>
    </>
  );
}

export default TodoItem;

方案2：将myClass设为state（已尝试的方式） #

该方式可生效，但因myClass的值完全由status决定，属于冗余状态，不如方案1简洁。若使用此方式，需避免直接修改props，仅通过setStatus和setMyClass更新状态即可。

内容的提问来源于stack exchange，提问作者MinhSu - Justin