Question

我正在尝试将英超联赛的Twitter时间线添加到我的反应应用中。 Twitter为我提供了HMTL的代码片段，它在常规HTML页面中运行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PREMIER LEAGUE</title>
<link rel="stylesheet" href="">
</head>
<body>
<div>
<a class="twitter-timeline"  href="https://twitter.com/search?q=%40premierleague" data-widget-id="820173369198968833">Tweets about @premierleague</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</body>
</html>

我试图将此转换为我的反应应用程序，但它不起作用或抛出任何错误。这是我在反应中使用的代码。

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





class App extends Component {

render() {
return (
  <div className="App">
    <div className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h2>WELCOME TO THE PREMIER LEAGUE BLOG</h2>
    </div>
    <div>
    <meta charSet="utf-8" />
    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
    <title>PREMIER LEAGUE</title>
    <link rel="stylesheet" href />
    <div>
      <a className="twitter-timeline" href="https://twitter.com/search?q=%40premierleague" data-widget-id={820173369198968833}>Tweets about @premierleague</a>
      {!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");}
    </div>
  </div>

      </div>
);
}
}

export default App;

提前感谢您的帮助。

Answer 1

我成功使用react-twitter-embed

<TwitterTimelineEmbed sourceType="profile" screenName="USERNAME" options={{height: 400}} />

但是需要触发重新渲染以获取实时更新。

将twitter时间线嵌入到应用程序中

1 个答案: