React 18应用嵌入Twitter timeline失败问题咨询

问题根因 #

直接粘贴publish.twitter生成的嵌入代码失效有三个核心原因：

• React不会执行JSX里直接写入的内联script标签，导致Twitter的widgets初始化脚本根本没运行
• React 18严格模式下组件会重复挂载/卸载，打断旧版适配包、Twitter脚本默认的自动初始化流程，最终只 fallback 显示Tweets by xxx的文本
• 现有第三方适配包未针对React 18的useEffect执行时机、hydration逻辑做适配，会出现初始化失败、重复渲染等问题

无依赖兼容实现（推荐） #

不需要安装任何第三方包，手动控制脚本加载和初始化时机即可完美适配React 18，所有官方配置参数都支持。

实现逻辑 #

• 用ref标记初始化状态，适配React 18严格模式的重复执行特性，避免重复加载脚本
• 组件挂载后动态插入Twitter官方widgets脚本，做单例判断防止重复插入
• 脚本加载完成后手动调用初始化方法，指定渲染当前组件容器内的时间线，不依赖脚本的自动扫描逻辑
• 组件卸载时重置状态标记，避免内存泄漏

可直接复用的组件代码 #

import { useEffect, useRef } from 'react';

const TwitterTimeline = ({ 
  username, 
  width = 400, 
  height = 600,
  // 支持所有官方data-*配置，比如隐藏头图、限制推文数量等
  ...restConfig 
}) => {
  const containerRef = useRef(null);
  const initFlagRef = useRef(false);

  useEffect(() => {
    if (initFlagRef.current) return;
    initFlagRef.current = true;

    const initWidget = () => {
      // 脚本已加载时直接初始化
      if (window.twttr) {
        window.twttr.widgets.load(containerRef.current);
        return;
      }
      // 动态加载官方脚本
      const scriptEl = document.createElement('script');
      scriptEl.src = 'https://platform.twitter.com/widgets.js';
      scriptEl.async = true;
      scriptEl.onload = () => {
        window.twttr.widgets.load(containerRef.current);
      };
      document.body.appendChild(scriptEl);
    };

    initWidget();

    return () => {
      initFlagRef.current = false;
    };
  }, [username]);

  return (
    <div ref={containerRef}>
      <a
        className="twitter-timeline"
        data-width={width}
        data-height={height}
        href={`https://twitter.com/${username}?ref_src=twsrc%5Etfw`}
        {...Object.entries(restConfig).reduce((acc, [key, val]) => {
          acc[`data-${key}`] = val;
          return acc;
        }, {})}
      >
        Tweets by {username}
      </a>
    </div>
  );
};

export default TwitterTimeline;

使用说明 #

• 直接传入需要展示的用户名即可：<TwitterTimeline username="blabla" />
• 所有官方支持的时间线配置参数都可以直接作为组件props传入，比如要隐藏页眉就加noheader配置，对应写<TwitterTimeline username="blabla" chrome="noheader" />即可，和官方生成代码的配置规则完全一致
• 如果本地测试时仍然只显示文字，先检查广告拦截、隐私保护类浏览器插件是否拦截了Twitter相关资源请求，这类插件会直接阻断widgets脚本的加载
• 不要在JSX里直接写入官方生成代码自带的script标签，React不会执行这类动态插入的内联脚本，这是最常见的踩坑点

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