React实现点击消失Overlay激活滚动缩放组件的问题排查

你写的代码存在以下4个核心问题：

• 状态初始值逻辑反了：isClicked初始值设为true，导致首次渲染时遮罩的判断条件isClicked === false不成立，遮罩直接不显示，和需求完全相反，初始值应该为false。
• style属性赋值非法：用&&给style赋值时，条件不成立会返回布尔值false，React不支持style接收布尔值，会触发运行时警告，应该改用三元运算符，条件不成立时返回空对象{}。
• 布局完全不符合需求：你把遮罩样式、提示文字和子组件放在同一个div下，没有设置定位，遮罩根本无法覆盖子组件，提示文字也会和子组件内容挤在一起，没法居中显示。
• 点击事件绑定范围冗余：点击事件绑在父容器上，就算遮罩消失后点击内部子组件也会触发无意义的状态更新，属于多余逻辑。

import React from 'react';

// 泛型声明接收children属性
export const OverlayClick: React.FC<React.PropsWithChildren<unknown>> = (props) => {
  // 初始未激活，显示遮罩
  const [isActivated, setIsActivated] = React.useState(false);

  return (
    // 父容器相对定位，作为遮罩的定位参照物
    <div className="w-100 h-100 relative">
      {/* 业务组件正常渲染 */}
      {props.children}
      {/* 未激活时才渲染遮罩，不需要用样式控制显示隐藏，减少不必要的DOM节点 */}
      {!isActivated && (
        <div
          className="absolute inset-0 flex items-center justify-center text-white cursor-pointer"
          style={{
            background: 'rgba(0, 0, 0, 0.5)',
            zIndex: 1000
          }}
          onClick={() => setIsActivated(true)}
        >
          Click to activate
        </div>
      )}
    </div>
  );
};

如果你的项目用了Tailwind CSS，上面的类名可以直接生效，如果没用到，自行把relative、absolute inset-0、flex items-center justify-center对应的CSS样式补充到对应节点即可。

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