React中useEffect未进入if分支：条件判断为何未触发

• 核心问题：你用wrapperRef.current.style.opacity读取的是元素的行内样式，如果元素的opacity是通过CSS类、外部样式表或者其他非行内方式设置的，这个值会是空字符串，自然触发不了if/else if分支。
• 解决方法：改用window.getComputedStyle()获取元素最终生效的计算样式，它能拿到所有来源的样式值，包括CSS类、样式表等设置的。

修改后的代码如下：

useEffect(() => {
  const computedStyle = window.getComputedStyle(wrapperRef.current);
  const opacity = computedStyle.opacity;
  console.log(opacity);
  if (opacity === "0") {
    setIsHidden(true);
    console.log("true");
  } else if (opacity === "1") {
    setIsHidden(false);
    console.log("false");
  }
}, [position]);

额外注意：

• getComputedStyle返回的opacity是字符串类型（比如"0"、"1"、"0.5"），判断时要和字符串比较，别直接和数字0/1对比。
• 如果opacity是通过过渡/动画动态变化的，会出现非0/1的中间值，这时候两个分支都不会触发，你可以根据需求调整判断逻辑（比如用parseFloat(opacity) <= 0.1来近似判定隐藏状态）。

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