Reactで別のjsファイルや、txtファイルを読み込む方法

Reactを使う時jsx内で外部ファイルとしてjsやtextファイルを読み込ませる方法

通常のHTMLでjsファイルを読み込む際は？

普通にjsファイルを読み込にはHTMLにwindow.onloadを付けてファイルを読み込みjsファイルを使うことができる。ReactもHTMLに書けば使うことはできるのだが...
react(jsx)内で変数として使いたい場合どうすればいいのか？

なぜこのようなことをするのか？

Reactのjsx内に変数、データを含める、もしくはimportして使用すると、難解化されてしまい手動で単純なファイルを修正することが困難になり修正ができない。かといってHTMLにScriptを使うとjsx内でそのデータを使うことができ無くなる...

また、プレーンの外部scriptを使いたいのだがどうすれば読み込んでくれるのか困ることがあった。

Reactでローカルのファイルを読み込む方法

Reactで読み込む方法として、

グローバル変数にする
fetchで読み込む
appednchildでHTMLにスクリプトを付与する

上記３つ方法があります。グローバル変数はまぁそうすれば読み込めるよね... 　

fetchで読み込む際は、jsではなく、単純なデータを取得するのでjsファイルとして読み込む事はできない。

onloadでjsファイルをappendでHTMLに読み込ませることでjsファイルとしてReactで使用が可能になる。

注意

読み込む方法によってuserslist.jsの中身が違います。

グローバル変数にする

もちろんHTML内にscriptを追加する手段もあるが、グローバル変数にしないとuserslistにアクセスできない。

<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="userslist.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>webpack React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

userslist.js

window.usersList = ["a","b","c","d"];

fetchで読み込む

こんな感じでfetchを使う方法も...
値だけをそのまま取得するだけなら使えるので、余計なものを記入しないのであればこれが単純で良いかも。

    useEffect(() => {
        fetch('userslist.js')
            .then(response => response.json())
            .then(data => {
                setUsers(data);
            })
            .catch(error => {
                console.error('Error fetching users list:', error);
            });
    }, []);

userslist.js

["a","b","c","d"]

appednchildで読み込む

HTMLではなく、jsxにonloadでjsファイルを読み込ませる事でusesateに値を入れることができる。

App.jsx


  const [externalData, setExternalData] = useState();

  useEffect(() => {
    const script = document.createElement('script');
    script.src = './userslist.js';
    script.async = true;
    script.onload = () => {
      // @ts-ignore
      setExternalData(arraydata); // ローカルのファイルを読み込ませる。
    };
    //htmlにscriptを付与させる
    document.body.appendChild(script);
    //<script>は不要なので削除&メモリーリーク対策
    return () => {
      document.body.removeChild(script);
    };
  }, []);

return(
  <div>
   {externalData.map((value, index) => {
   return(<p>{value}</P>)
        })}
  <div>
)