是否无法在重新渲染时更新类名？

const [selected, setSelectedState] = useState(true);

let className = "none";
useEffect(() => {
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );


return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

className 显示正确，但是当 div 重新呈现时(我看到这是因为随机数更新)，className 保持为“无”。我也很困惑，因为我认为 useEffect 也会立即运行。所以它一开始就不应该是“无”，因为它应该立即被覆盖？

最佳答案

要添加有关@MarkoCen 答案的更多详细信息(这是正确的)，在使用钩子(Hook)时需要了解一些事情:

• useEffect 在每次渲染之后 运行。

• 在每次渲染时，组件都会在钩子(Hook)定义之后从头开始重新执行。鉴于您的代码(我在每个周期都添加了注释以识别)

const [selected, setSelectedState] = useState(true); // 0

let className = "none"; // 1

useEffect(() => { 
    // 3
    className = "appointment-item " + (selected ? "selected" : "");
    console.log(className );
}, [selected] );

// 2
return (
  <div className={`${className}`} onClick={()=>setSelectedState(!selected)}>{Math.random()}</div>
);

以下是循环顺序:

第一次渲染:

• 0:使用状态

• 1: 类名 = 无

• 2:使用 className = none 渲染

• 3:使用效果

重新渲染:

• 1: 类名 = 无

• 2:使用 className = none 重新渲染

• 3:使用效果

如您所见，每次渲染都将 className 设置为“none”，因此您永远不会得到您期望的结果。

关于reactjs - react Hook UseEffect 与类名，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60892197/