React使用react-helmet加载Telegram widget inline script无法渲染怎么办

• 缺少渲染承载节点：Telegram widget 脚本执行时会扫描页面上包含对应data属性的DOM节点作为渲染容器，你仅将脚本通过react-helmet注入到页面头部，没有提供对应的渲染目标，脚本无法找到输出位置自然没有内容展示。
• 脚本加载时机不匹配：react-helmet插入的脚本如果在组件挂载完成前就加载执行，就算后续生成了DOM节点，脚本也不会重复触发渲染逻辑，导致渲染失败。
• 属性值配置错误：你当前data-telegram-post属性填写的是占位符#####，需要替换为实际的Telegram帖子标识，格式为频道名/帖子序号。

不要使用react-helmet注入脚本，改用组件挂载后动态注入的方式实现，参考代码如下：

import React, { useEffect, useRef } from "react";

export default function App() {
  const widgetRef = useRef(null);

  useEffect(() => {
    // 避免重复加载脚本
    if (window.TelegramWidget) {
      window.TelegramWidget.Posts?.render(widgetRef.current);
      return;
    }

    const script = document.createElement("script");
    script.async = true;
    script.src = "https://telegram.org/js/telegram-widget.js?15";
    // 替换为实际的帖子ID
    script.dataset.telegramPost = "频道名/帖子序号";
    script.dataset.width = "100%";
    
    widgetRef.current.appendChild(script);
  }, []);

  return (
    <main className="text-gray-400 bg-gray-900 body-font">
      <div className="containers">
        {/* Widget 专属承载节点 */}
        <div ref={widgetRef}></div>
      </div>       
    </main>
  )
}

如果项目采用服务端渲染（SSR）架构，在服务端直接将widget的脚本和节点渲染到返回的HTML中，确实可以避免客户端渲染的时机问题，首屏加载速度更快，也不会出现内容闪烁。如果是纯客户端SPA项目，使用上述客户端实现即可满足需求，不需要额外调整后端逻辑。

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