ReactにLINEの友達追加ボタンを表示させたい。

#概要
React+SPAで作られたページにてLINEの友達追加ボタンを表示させたいと考えています。
下記のコードのようにuseEffectを使用し、div要素がマウント後に友達追加ボタンを表示するようにしています

  const wrapper = React.useRef(null);
  React.useEffect(() => {
    const win = window as any;
    if (win.LineIt) {
    win.LineIt.loadButton();
    } else {
    const script = document.createElement("script");
      script.src =
        "https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js";
      script.async = true;
      script.defer = true;
      (wrapper.current as any).appendChild(script);
    }
  }, []);
  return(
        <div ref={wrapper}>
          <div className="line-it-button" data-lang="ja" data-type="friend" data-lineid="hoge" style={{display:'none'}} ></div>
        </div>
  )

#問題点
上記のコードだと初めてアクセスした際に、正常にボタンが表示されません。
リロードや2回目にアクセスした場合は、正常に表示されます。

問題がある箇所をご指摘頂けないでしょうか？
よろしくお願い致します。

#追記
useEffect内の処理は問題なく実行されているようで、scriptタグの挿入は出来ています。

<script src="https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js" async="" defer=""></script>

しかし、scriptタグでロードした内容が実行されていないようです。
デベロッパーツールのコンソールには一切エラーやwarningの出力がありません。
処理内容は、line-it-butttonクラスのdivをiframeに置き換える処理のようです。

リロードや2回目のアクセスでは問題なく表示されるので、現状下記のようにして対処しています。

          <div className="line-it-button" data-lang="ja" data-type="friend" data-lineid="hoge" >
            友達追加ボタンが表示されない場合、リロードしてください。
          </div>

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

回答1件

ベストアンサー

上記のuseEffect記述だとコンポーネントのマウント時に1度しか呼ばれないので、elseでscriptを追加した後にif (win.LineIt)でボタンをloadする処理を通ることがないと思います

次のようにhasScriptとisButtonLoadedというフラグを持たせてみてはどうでしょうか？

jsx
1  const [hasScript, setHasScript] = useState(false);
2  const [isButtonLoaded, setIsButtonLoaded] = useState(false);
3
4  const wrapper = React.useRef(null);
5
6
7  React.useEffect(() => {
8    const script = document.createElement("script");
9      script.src =
10        "https://www.line-website.com/social-plugins/js/thirdparty/loader.min.js";
11      script.async = true;
12      script.defer = true;
13      (wrapper.current as any).appendChild(script);
14      setHasScript(true);
15  }, []);
16
17  React.useEffect(() => {
18    const win = window as any;
19    if (win.LineIt && hasScript && !isButtonLoaded) {
20    win.LineIt.loadButton();
21    setIsButtonLoaded(true);
22    }
23  }, [hasScript, isButtonLoaded]);