React中Twitter嵌入时间线组件为何未随状态更新重渲染？

这个问题我之前做项目时也踩过坑！核心原因是Twitter的官方嵌入脚本只会在页面首次加载时解析一次DOM中的.twitter-timeline元素，当React通过props更新组件的href或ticker属性后，虽然DOM元素的属性已经变化，但Twitter的脚本不会自动重新识别并渲染新的时间线。

解决方案：手动触发Twitter时间线重新渲染 #

我们可以利用React的生命周期方法（类组件）或钩子（函数组件），在props更新后手动重建嵌入元素并调用Twitter的渲染API。

类组件版本（适配你的现有代码）

import React from "react";

export class TwitterCard extends React.Component{
  // 用ref获取容器DOM节点
  containerRef = React.createRef();

  componentDidUpdate(prevProps) {
    // 仅当href或ticker变化时执行更新逻辑
    if (prevProps.href !== this.props.href || prevProps.ticker !== this.props.ticker) {
      this.renderTwitterTimeline();
    }
  }

  componentDidMount() {
    // 组件首次挂载时渲染时间线
    this.renderTwitterTimeline();
  }

  renderTwitterTimeline() {
    const container = this.containerRef.current;
    if (!container) return;

    // 移除旧的时间线元素，避免重复渲染
    const oldTimeline = container.querySelector('.twitter-timeline');
    if (oldTimeline) {
      oldTimeline.remove();
    }

    // 创建新的时间线元素并设置属性
    const newTimeline = document.createElement('a');
    newTimeline.className = 'twitter-timeline';
    newTimeline.href = this.props.href;
    newTimeline.setAttribute('data-height', '100%');
    newTimeline.textContent = `Tweets by ${this.props.ticker}`;
    
    // 将新元素插入容器
    container.appendChild(newTimeline);

    // 调用Twitter的加载API重新渲染时间线
    if (window.twttr) {
      window.twttr.widgets.load(container);
    }
  }

  render() {
    return ( 
      <div ref={this.containerRef}></div>
    )
  }
}

函数组件版本（如果后续重构可以用）

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

export function TwitterCard(props) {
  const containerRef = useRef(null);

  useEffect(() => {
    const renderTimeline = () => {
      const container = containerRef.current;
      if (!container) return;

      // 清理旧元素
      const oldTimeline = container.querySelector('.twitter-timeline');
      if (oldTimeline) oldTimeline.remove();

      // 创建新的时间线元素
      const newTimeline = document.createElement('a');
      newTimeline.className = 'twitter-timeline';
      newTimeline.href = props.href;
      newTimeline.setAttribute('data-height', '100%');
      newTimeline.textContent = `Tweets by ${props.ticker}`;
      
      container.appendChild(newTimeline);

      // 触发Twitter渲染
      window.twttr?.widgets.load(container);
    };

    renderTimeline();

    // 组件卸载时清理时间线
    return () => {
      const oldTimeline = containerRef.current?.querySelector('.twitter-timeline');
      if (oldTimeline) oldTimeline.remove();
    };
  }, [props.href, props.ticker]); // 监听href和ticker的变化

  return <div ref={containerRef}></div>;
}

关键注意事项 #

1. 确保加载Twitter嵌入脚本：在你的项目入口HTML文件（比如index.html）中，必须引入Twitter的官方脚本，否则window.twttr会不存在：

   <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
   

2. 避免重复渲染：每次props更新时先移除旧的时间线元素，防止出现多个时间线叠加的问题。
3. 异步脚本的兼容性：如果脚本还没加载完成就执行widgets.load()，可以加个判断或者监听脚本加载完成的事件，确保window.twttr存在后再调用。

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