質問

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を持っていますが、共有する気になれませんでした。

解決するには？

編集：物事は急速に変化しており、これは古いものです - アップデートを参照してください。

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

おそらく、次のようなことを試してみてください。

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

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

    document.body.appendChild(script);
}

ただし、この方法が本当に役に立つのは、ロードしたいスクリプトがモジュールやパッケージとして提供されていない場合だけです。 まず、私なら必ず

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

このような方法でパッケージをインストールしたと思われます。 react と react-document-title は、あなたの例から、そして、そこには npmで利用可能なTypekitパッケージ .

更新情報

フックがある以上、より良い方法は 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
}