gpt4 book ai didi

reactjs - react Hook UseEffect 与类名

转载 作者:行者123 更新时间:2023-12-05 09:10:48 28 4
gpt4 key购买 nike

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

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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com