Reactstrap Toast组件中回调Ref获取DOMRect全为0的异常问题

核心原因：Toast组件的内部状态与动画逻辑 #

Reactstrap的Toast组件不是简单渲染静态HTML，它内部封装了Bootstrap Toast的状态管理和过渡动画：

• 组件初始化时，存在短暂的状态过渡过程，比如Toast默认带fade淡入动画，初始状态下元素虽已挂载到DOM，但还处于未完全显示的状态（比如被设置为opacity: 0或未完成布局计算）。
• 此时调用getBoundingClientRect()，浏览器会返回全0的DOMRect，因为元素还没在视口中占据实际布局空间。

纯HTML正常工作的原因 #

你直接写的纯HTML给元素加了show类，跳过了Reactstrap Toast内部的状态初始化流程，元素从一开始就处于完全显示的布局状态，浏览器能立即计算出正确的位置信息。

Card组件无此问题的原因 #

Reactstrap的Card是纯静态布局组件，没有内置的显示/隐藏过渡动画或状态延迟逻辑，DOM挂载后浏览器会立刻完成布局计算，所以能正常获取位置。

可行的解决方案 #

方案1：利用Toast的onShown事件 #

Reactstrap的Toast提供了onShown回调，会在Toast淡入动画完成后触发，此时元素已完全显示，能拿到正确位置：

const Modes = () => {
  const targetRef = useRef(null);

  const handleToastShown = () => {
    if (targetRef.current) {
      const rect = targetRef.current.getBoundingClientRect();
      console.log("rect", rect);
    }
  };

  return (
    <Toast onShown={handleToastShown}>
      <ToastHeader />
      <ToastBody>
        <div ref={targetRef}></div>
      </ToastBody>
    </Toast>
  );
};

方案2：延迟获取位置 #

如果不想依赖组件事件，可以用setTimeout延迟执行位置获取，等待动画完成：

const callbackRef = useCallback((domNode) => {
  if (domNode) {
    // 匹配Bootstrap默认fade动画的300ms时长
    setTimeout(() => {
      const rect = domNode.getBoundingClientRect();
      console.log("rect", rect);
    }, 300);
  }
}, []);

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