React+TS聊天界面：根据消息高度条件显示侧边按钮问题求助

你的代码核心问题在于：当通过display: none隐藏侧边按钮容器时，该容器的offsetHeight会变为0，此时messageContainer.offsetHeight > 0必然成立，导致setShowSideButtons(true)，按钮又会显示，形成循环触发的死逻辑。另外，仅监听窗口resize不足以覆盖所有尺寸变化场景（比如消息内容动态更新），初始检查的时机也可能存在DOM尚未完全渲染的问题。

1. 改用不影响尺寸计算的隐藏方式 #

不要用display: none，改用visibility: hidden + pointer-events: none来隐藏按钮，这样容器的尺寸依然可以被正确获取，避免判断逻辑失效。

2. 监听消息内容变化 #

当messageContents更新时，需要重新检查按钮可见性，否则内容变化导致消息容器高度改变时，按钮状态不会更新。

3. 使用ResizeObserver监听容器尺寸变化 #

替代仅监听window resize，直接监听消息容器和按钮容器的尺寸变化，更精准且性能更好。

4. 优化防抖逻辑 #

确保防抖函数的依赖正确，避免不必要的重新创建。

import React, { useRef, useState, useCallback, useEffect } from "react";
import lodash from 'lodash';

// 保留你的props定义和其他导入

const Message: React.FC<MessageProps> = ({ sender, messageContents, actionButtons, children }) => {
    const chatMessageRef = useRef<HTMLDivElement>(null);
    const sideButtonsRef = useRef<HTMLDivElement>(null);
    const [showSideButtons, setShowSideButtons] = useState(true);

    // 核心判断逻辑：使用offsetHeight比较，此时按钮容器不会被display:none隐藏
    const checkAndSetButtonVisibility = useCallback(() => {
        const messageContainer = chatMessageRef.current;
        const sideButtons = sideButtonsRef.current;

        if (messageContainer && sideButtons) {
            const hasEnoughSpace = messageContainer.offsetHeight > sideButtons.offsetHeight;
            setShowSideButtons(hasEnoughSpace);
        }
    }, []);

    // 防抖处理：优化依赖，避免每次渲染重新创建
    const debouncedCheck = useCallback(
        lodash.debounce(checkAndSetButtonVisibility, 300),
        [checkAndSetButtonVisibility]
    );

    useEffect(() => {
        const messageContainer = chatMessageRef.current;
        const sideButtons = sideButtonsRef.current;
        let resizeObserver: ResizeObserver | null = null;

        // 监听消息容器和按钮容器的尺寸变化
        if (messageContainer && sideButtons) {
            resizeObserver = new ResizeObserver(debouncedCheck);
            resizeObserver.observe(messageContainer);
            resizeObserver.observe(sideButtons);
        }

        // 初始检查，确保DOM渲染完成后执行
        const initialCheck = setTimeout(checkAndSetButtonVisibility, 0);

        return () => {
            resizeObserver?.disconnect();
            debouncedCheck.cancel();
            clearTimeout(initialCheck);
        };
    }, [debouncedCheck, checkAndSetButtonVisibility]);

    // 监听消息内容变化，重新检查
    useEffect(() => {
        debouncedCheck();
    }, [messageContents, debouncedCheck]);

    return (
        <div className={`chat-message-outer-container ${sender.toLowerCase()}`}>
            <div className="chat-message-inner-container">
                <div className="chat-message-info">
                    {sender === MessageSender.Agent ? (
                        <div className="chat-list-item-ai-model-logo-message">
                            <img className="message-avatar" src={aiLogo} alt="AI Model Logo" />
                        </div>
                    ) : (
                        <div className="account-avatar-message">
                            <img className="message-avatar" src={userAvatar} alt="User avatar" />
                        </div>
                    )}
                    <div className="chat-message-info-sender">{sender}</div>
                </div>

                <div className="chat-message-select-checkbox">
                    <label className="button checkbox-field">
                        <input type="checkbox"/>
                        <span><br/></span>
                    </label>
                </div>

                <div className="chat-message-wrapper">
                    <div ref={chatMessageRef} className={`chat-message ${sender.toLowerCase()}-message`}>
                        <div className="chat-message-contents">{messageContents}</div>
                    </div>
                </div>

                {/* 修改隐藏方式：用visibility和pointer-events替代display:none */}
                <div
                    ref={sideButtonsRef}
                    className="chat-message-buttons-side"
                    style={{ 
                        visibility: showSideButtons ? 'visible' : 'hidden',
                        pointerEvents: showSideButtons ? 'auto' : 'none',
                        position: 'absolute'
                    }}
                >
                    {actionButtons}
                </div>

                <div className="chat-message-bottom">
                    {children}
                    <div className="chat-message-action-row">
                        <div className="chat-message-tag-list">
                            <Tag tagName={'Tag name'}/>
                            <AddElementButton type="new-tag-message"/>
                        </div>
                        <div className="chat-message-buttons-bottom">
                            {actionButtons}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

• visibility: hidden会保留元素的布局空间，所以按钮容器的尺寸依然可以被正确获取，解决了原逻辑中offsetHeight为0的问题。
• pointer-events: none确保隐藏状态下按钮无法被点击，避免交互问题。
• 使用ResizeObserver可以监听容器自身的尺寸变化，比监听window resize更精准，覆盖了消息内容更新、字体变化等场景。
• 增加了对messageContents的监听，确保内容变化时重新检查按钮可见性。

内容的提问来源于stack exchange，提问作者José Guedes