☰

React/JSXにスクリプトタグを追加する 質問する

tag-icon • tag-icon javascript reactjs ecmascript-6
React/JSXにスクリプトタグを追加する 質問する

React コンポーネントにインライン スクリプトを追加しようとするという比較的単純な問題があります。これまでのところ、次のことがわかっています。

'use strict';

import '../../styles/pages/people.scss';

import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';

import { prefix } from '../../core/util';

export default class extends Component {
    render() {
        return (
            <DocumentTitle title="People">
                <article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
                    <h1 className="tk-brandon-grotesque">People</h1>
                    
                    <script src="https://use.typekit.net/foobar.js"></script>
                    <script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
                </article>
            </DocumentTitle>
        );
    }
};

私も試しました:

<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>

どちらの方法でも、目的のスクリプトが実行されないようです。私が見逃している単純なことだと思います。誰か助けてくれませんか?

PS: foobar は無視してください。実際に使用している実際の ID がありますが、共有する気はありません。

ベストアンサー1

編集: 物事は急速に変化しており、この情報は古くなっています - 更新を参照してください

このコンポーネントがレンダリングされるたびにスクリプトを何度も取得して実行しますか、それともこのコンポーネントが DOM にマウントされたときに 1 回だけ取得して実行しますか?

次のようなことを試してみてください:

componentDidMount () {
    const script = document.createElement("script");

    script.src = "https://use.typekit.net/foobar.js";
    script.async = true;

    document.body.appendChild(script);
}

ただし、これは、ロードするスクリプトがモジュール/パッケージとして利用できない場合にのみ役立ちます。まず、私は常に次の操作を行います。

  • パッケージを探すネプ
  • パッケージをダウンロードしてプロジェクトにインストールします ( npm install typekit)
  • import必要なパッケージ（import Typekit from 'typekit';）

これはおそらくあなたがパッケージをインストールした方法でありreact、react-document-titleあなたの例からすると、Typekit パッケージは npm で入手可能。

アップデート：

フックができたので、次のように使用する方がよいかもしれませんuseEffect:

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://use.typekit.net/foobar.js";
  script.async = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);

これは、カスタム フックに最適な候補となります (例: hooks/useScript.js)。

import { useEffect } from 'react';

const useScript = url => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.async = true;

    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [url]);
};

export default useScript;

次のように使用できます:

import useScript from 'hooks/useScript';

const MyComponent = props => {
  useScript('https://use.typekit.net/foobar.js');

  // rest of your component
}

おすすめ記事