React组件中如何基于模态框位置动态设置Toast偏移量？

原代码核心问题 #

• 按钮点击逻辑错误：onClick={notify("Copied!")}会在组件渲染时直接触发Toast，而非点击按钮时触发。
• 模态框位置获取时机过早：组件初始化时模态框还未挂载到DOM，导致getAbsPositionDialog始终返回{x:0,y:0}。
• Toaster挂载方式错误：useEffect中直接创建Toaster组件但未挂载到DOM，无法生效。
• 未处理位置动态变化：模态框移动或窗口 resize 时，偏移量不会自动更新。

修正后的代码 #

import React, { useState, useEffect } from 'react';

export const NewComponent: React.FC<NewComponentProps> = ({prop1, prop2, prop3 }) => {
    // 用state保存偏移量，更新时触发组件重渲染
    const [offset, setOffset] = useState({ horizontal: 0, vertical: 0 });

    const getAbsPositionDialog = () => {
        const element = document.getElementById('modalDialogId');
        if (!element) {
            return { horizontal: 0, vertical: 0 };
        }
        const dialogPosition = element.getBoundingClientRect();
        // 返回基于模态框位置计算后的偏移量
        return { 
            horizontal: dialogPosition.x + 100, 
            vertical: dialogPosition.y + 100 
        };
    };

    // 在组件挂载后、窗口resize时重新计算偏移量
    useEffect(() => {
        const updateOffset = () => {
            const newOffset = getAbsPositionDialog();
            setOffset(newOffset);
        };

        // 初始化时计算一次
        updateOffset();

        // 监听窗口resize，处理模态框位置变化
        window.addEventListener('resize', updateOffset);

        // 清理监听
        return () => window.removeEventListener('resize', updateOffset);
    }, []);

    const toasterId = useId("toaster");
    const { dispatchToast } = useToastController(toasterId);

    const notify = (title: string) => {
        dispatchToast(
            <Toast>
              <ToastTitle>{title}</ToastTitle>
            </Toast>,
            { intent: "success" }
          );
    };

    return (
        <div>
            {/* 修正点击事件，改为回调形式 */}
            <Button onClick={() => notify("Copied!")}/>
            {/* 将Toaster放在返回的JSX中，确保正确挂载 */}
            <Toaster
                toasterId={toasterId}
                position="top-start"
                offset={offset}
                pauseOnHover
                pauseOnWindowBlur
                timeout={1000}
            />
        </div>
    );
};

关键改动说明 #

1. 用useState管理偏移量：确保偏移量更新时能触发组件重新渲染，让Toaster拿到最新的偏移值。
2. 延迟获取模态框位置：在useEffect中执行位置计算，此时组件已挂载，模态框大概率已存在于DOM中。
3. 监听窗口resize：处理模态框因窗口变化导致的位置偏移，保证Toast始终靠近模态框。
4. 修正按钮点击逻辑：使用箭头函数包裹notify调用，确保只有点击按钮时才触发Toast。
5. 正确挂载Toaster：将Toaster放在组件的返回JSX中，而非useEffect的副作用里，让React正常管理其生命周期。

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