如何在React应用中直接显示Twitter时间线而非跳转链接？

嘿，我来帮你搞定这个Twitter时间线的问题！你现在只看到跳转链接，主要是因为React的DOM渲染机制和Twitter Widget脚本的加载时机不匹配，另外你代码里还有个小细节需要调整。下面给你两种解决方案：

方案一：用原生Twitter Widget（无需额外组件） #

你不需要安装第三方组件也能实现，只要调整脚本加载方式和React的生命周期配合：

步骤1：修正JSX里的class属性 #

React里要用className代替HTML的class，所以把<a class="twitter-timeline">改成<a className="twitter-timeline">。

步骤2：在组件挂载后加载并初始化Twitter脚本 #

把原来放在JSX里的<script>标签移到组件的componentDidMount生命周期里动态加载，这样能确保React渲染完DOM后再初始化时间线：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  componentDidMount() {
    // 检查Twitter脚本是否已加载，避免重复加载
    if (!window.twttr) {
      const script = document.createElement('script');
      script.src = 'https://platform.twitter.com/widgets.js';
      script.async = true;
      script.charset = 'utf-8';
      document.body.appendChild(script);

      // 脚本加载完成后初始化所有Twitter Widget
      script.onload = () => {
        window.twttr.widgets.load();
      };
    } else {
      // 如果脚本已经加载过，直接重新初始化
      window.twttr.widgets.load();
    }
  }

  render() {
    return (
      <div>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo"/>
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
        <div className="Twitter-list">
          <a className="twitter-timeline" data-width="1000" data-height="500" href="https://twitter.com/life_antiguru?ref_src=twsrc%5Etfw">Tweets by life_antiguru</a>
        </div>
      </div>
    );
  }
}

export default App;

方案二：使用第三方React组件（更省心） #

如果你不想自己处理脚本加载的细节，可以用现成的React组件，比如react-twitter-embed，它已经封装了所有Twitter Widget的逻辑：

步骤1：安装组件 #

npm install react-twitter-embed
# 或者用yarn
yarn add react-twitter-embed

步骤2：在组件中使用 #

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { TwitterTimelineEmbed } from 'react-twitter-embed';

class App extends Component {
  render() {
    return (
      <div>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo"/>
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
        <div className="Twitter-list">
          <TwitterTimelineEmbed
            sourceType="profile"
            screenName="life_antiguru"
            options={{ width: 1000, height: 500 }}
          />
        </div>
      </div>
    );
  }
}

export default App;

这个组件的好处是完全符合React的使用习惯，不需要手动操作DOM，而且支持更多自定义配置。

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