解决TypeScript报错：Property 'display' does not exist on type 'HTMLIonListElement'

• 核心错误1：display不是DOM元素的原生属性，它属于元素的styleCSS样式对象下的属性，直接访问HTMLIonListElement实例的display属性必然不存在
• 核心错误2：你的代码存在逻辑时序问题：React的setState是异步更新的，你在调用setIsThreeDotsMenuOpen之后立即读取isThreeDotsMenuOpen拿到的还是更新前的旧值，会导致显示隐藏的状态和实际预期相反

方案1：修正DOM属性访问写法（最小改动） #

直接修改原代码中对display属性的访问路径，同时修复异步时序问题：

const [isThreeDotsMenuOpen, setIsThreeDotsMenuOpen] = useState<boolean>(false);
const threeDotsIcon = useRef<HTMLIonListElement>(null);
const openLeaveMenu = () => {
    // 先计算最新状态，规避setState异步问题
    const newOpenState = !isThreeDotsMenuOpen;
    setIsThreeDotsMenuOpen(newOpenState);
    const button = threeDotsIcon.current;
    if(button) {
        // display属于style对象下的属性
        button.style.display = newOpenState ? "block" : "none";
    }
}

如果修改后仍有类型报错，补充类型断言即可：

(button as HTMLElement).style.display = newOpenState ? "block" : "none";

方案2：React声明式写法（更推荐） #

不需要操作ref直接控制DOM，直接在IonList组件上绑定样式属性，是React框架下的标准实现：

<IonList 
  style={{ display: isThreeDotsMenuOpen ? "block" : "none" }}
  className="login-three-dots-menu"
>
  {/* 你的列表内容 */}
</IonList>

这种写法完全避免了直接操作DOM，也不会产生类型报错，代码更易维护。

内容的提问来源于stack exchange，提问作者Inês Borges