React.jsでscriptタグを使いたい

Question

TwitterをWEBページに表示させたいです。WEBページをReact.jsで作成しているのですが、Twitter　Publishの通りにコードをコピペしても思った通りに表示されません。おそらくrender文内でscript文がうまく読み込めていないと思います。そこでネットで調べてみましたがuseEffectを用いる方法などいっぱいあったのですがよくわかりませんでした。どなたか教えてほしいです。

import React from 'react';


export default function Component4(){
    return (
            <div className='component4'>         
                      <a className="twitter-timeline" data-width="450" data-height="450" data-theme="dark" href="https://twitter.com/hurc8?ref_src=twsrc%5Etfw">Tweets by hurc8</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
            </div>
    )
}

Answer 1

React を使う場合、普通の DOM を扱う JavaScript コード（jQuery とか）は基本的に使えないと思う必要があって、Twitter の埋め込みコードも例外ではありません。
Twitter のようによく使われるものはたいてい誰かがライブラリを作ってくれている場合が多く、検索したら react-twitter-embed というのが見つかりましたので、ありがたく使わせてもらうのがいいと思います。

$ npm install --save react-twitter-embed

import React from 'react';
import { TwitterTimelineEmbed } from 'react-twitter-embed';

export default function Component4() {
    return (
        <div>
            <TwitterTimelineEmbed
              sourceType="profile"
              screenName="hurc8"
              theme="dark"
              options={{ width: 450, height: 450 }}
            />
        </div>
    );
}

Comments

[tsugumi_7788]

ありがとうございます！助かりました