在 React 中为 iframe 添加加载提示时，需确保 iframe 始终被渲染（否则 onLoad 事件无法触发），通过状态控制加载占位符显隐，而非条件渲染整个 iframe。
在 react 中为 iframe 添加加载提示时，需确保 iframe 始终被渲染（否则 `onload` 事件无法触发），通过状态控制加载占位符显隐，而非条件渲染整个 iframe。
在构建嵌入式日程预约组件（如 Calendly）时，iframe 加载延迟常导致页面空白或布局跳动。若错误地使用条件渲染（即仅在加载完成时才挂载 iframe），onLoad 事件将永远无法触发——因为 iframe 根本未被插入 DOM。这是初学者常见的逻辑陷阱。
✅ 正确做法是：始终挂载 iframe 元素，仅动态控制加载指示器的显示/隐藏。利用 useState 管理加载状态，并在 onLoad 回调中关闭加载态。同时建议添加 onError 处理加载失败场景，提升健壮性。
以下是优化后的完整实现（兼容 React 18 + TypeScript + Tailwind CSS）：
import { useState, useEffect } from 'react';
export default function CalendlyEmbed({ calendlyEmbed }: { calendlyEmbed: string }) {
const [isIframeLoading, setIsIframeLoading] = useState(true);
// 可选：防止 iframe 切换时状态残留（例如 URL 动态变化）
useEffect(() => {
setIsIframeLoading(true);
}, [calendlyEmbed]);
return (
<div className="flex justify-center items-center w-full max-w-4xl h-full">
{/* 加载占位符 —— 仅视觉层叠加，不干扰 iframe 挂载 */}
{isIframeLoading && (
<div className="absolute inset-0 flex items-center justify-center z-10">
<div className="h-64 w-80 bg-gray-200 brightness-75 rounded-lg animate-pulse"></div>
</div>
)}
{/* iframe 始终存在，确保 onLoad 可触发 */}
<iframe
className="w-full h-full min-h-[1250px] md:min-h-[750px] border-0 box-border"
src={calendlyEmbed}
title="Select a Date & Time - Calendly"
onLoad={() => setIsIframeLoading(false)}
onError={() => {
console.warn('Calendly iframe failed to load');
setIsIframeLoading(false); // 防止 loading 状态卡死
}}
// 关键：禁止浏览器默认加载行为干扰（可选）
loading="lazy"
/>
</div>
);
}? 关键注意事项：
- ❌ 错误模式：{isIframeLoading ?
: } → iframe 未挂载，onLoad 永不执行； - ✅ 正确模式：{isIframeLoading &&
} + 始终渲染 - 使用 absolute 定位 + z-10 让加载层覆盖在 iframe 上方，避免布局重排；
- 添加 onError 是必要兜底——网络异常、跨域拦截或无效 URL 均可能导致加载失败；
- 若嵌入内容来自第三方（如 Calendly），注意其是否支持 postMessage 或提供加载回调，必要时可结合 iframe.contentWindow 做更精细的状态探测（进阶场景）。
通过该方案，你既能获得平滑的加载体验，又能保证 iframe 的生命周期可控、事件可监听，符合现代 React 的声明式与可预测性原则。
