Reactで、<script>でインポートするタイプのスクリプトをJSX内部で使う方法

前提・実現したいこと

個人の開発でReactを利用しているのですが、利用しようとしているAPIが<script>タグでHTML内にインポートするものです。nodeのパッケージなどはなく、よってreactのコードとしてimportもできません。このコードを、なんとかしてReactのJSXで利用したいのですがどうすればいいでしょうか。

発生している問題・エラーメッセージ

APIサイトの公式に書いてある仕様はこんな感じです。

html
1<script src="hogehoge.com/fuga"></script>
2<script>
3    const center = new hoge.value(xxx, yyy)
4    function init() {
5        const fuga = new hoge.a('00000');
6    }
7</script>

そしてこのinit()を

<body onload="init()">

することで実行されるようです。
必要なのはこのhogehoge.com/fugaで入手できるであろう中身のfunction達、hogeなどですが、これをJSXのコードに取得する方法で悩んでおります。
単純にHTMLで書いた上でJSXでコードを書こうにもJSXとしては未定義なのでエラーとなります。

試したこと

react
1import * as hogeFunction from "hogehoge.com/fuga"
2//or
3import("hogehoge.com/fuga").then(c=>{
4   console.log(c);
5});

とりあえず無難にimport?と思いましたがそれぞれnot found.

react
1fetch("hogehoge.com/fuga")
2.then(d=>{
3   console.log(d) //→ fetchのステータスが出る
4   return(d.body)
5})
6.then(body=>{
7   console.log(body) //→ Readable Streamが出る→ここからはわからなかった
8})

fetchを叩きましたが、function本体に辿りつくことはできませんでした。
だいぶ邪道なことをしようとしているのは理解しているのですがなんとか達成したいです。
React初心者なので基礎が抜けているかもしれませんがよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Reactは最終的にはHTMLと(普通の)JSで動作します。
なのでpublic/index.htmlに<script src="hogehoge.com/fuga"></script>を記述すれば、該当のスクリプトの変数などはグローバルに展開されるためReact内でも使用することができます。

ただし、eslintなどの静的解析ツールを使用している場合、外部スクリプトの変数などはエディタ上に未定義エラーが表示されます。実行時には展開されているため問題は無いはずです。

投稿2021/11/03 11:32