web-dev-qa-db-ja.com

Gatsby Reactページ内に<script>で生のHTMLを追加

Gatsbyページに外部埋め込みコードを追加しようとしています。

私は現在使用しています

import React from 'react'
import Link from 'gatsby-link'


let test ="<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>"

const ContactPage = () => (

    <div>
        <h1>ContactPage</h1>
        <div
            dangerouslySetInnerHTML={{ __html: test }}
          />
    </div>

)

export default ContactPage

構文エラーでいっぱいです。反応コンポーネントに生のスニペットを含めるより良い方法を指摘していただけますか？

Gatsbyにカスタムスクリプト、Googleアナリティクス、アイコンフォント、animate.jsなど必要なすべての追加スクリプトを追加する場所はありますか？

お手伝いありがとう

javascriptreactjsgatsby
10
Giannis Dallas

多くの方法でgatsby.jsプロジェクトに外部スクリプト（npmモジュールなし）を注入できます。 「web-analytics」スクリプトには、それぞれのgatsby-pluginを使用することをお勧めします。

require()を使用：

  • プロジェクト__myScript.js_にファイルを作成し、スクリプトの内容を貼り付けます

  • const myExtScript = require('../pathToMyScript/myScript')を追加
    to statefullコンポーネントのPagesフォルダー内のrender()およびreturn()の前に実行する場合スクリプトそのページのみ（= page/component scope）。

    _export default class Contact extends React.Component {  
  render() {  
   const myExtScript = require('../pathToMyScript/myScript')  
    return (
      ........       
               )}
_

  • グローバルスコープ（=すべてのページ/コンポーネント内）でスクリプトを実行する場合：
    _html.js_に追加します

    _<script dangerouslySetInnerHTML= {{ __html: ` 
    putYourSciptHereInBackticks `}} />`  
_

    _</body>_を閉じる前。このコンポーネントにはグローバルスコープを操作/監視することをお勧めします。これは、HTMLをすべてのページ/ルートにグローバルに注入するという特定の目的があるためです。

  • global scopeで注入する別の方法は、コンポーネント宣言の前にrequire()を使用することです。 これは機能しますが、コンポーネントがグローバルに何も注入するべきではないため、良い習慣ではありません。

    _ const myExtScript = require('../pathToMyScript/myScript')  

   export default class Contact extends React.Component {  
    render() {  
      return (
      ........       
               )}
_

追伸回答が適切に編集されていない場合は申し訳ありません。これがStackOverflowでの最初の回答です。

16
AndreasT

React-Helmet を使用します

最初 import Helmet from 'react-helmet'

div内で次のようにできます

<Helmet>
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }
}(document, 'script'));
</script>
</Helmet>
8
Mohit Bajoria

どうやら、複数行のJS構文を使用して、

let test = "<script type='text/javascript'>\
(function(d, s) {\
    var useSSL = 'https:' == document.location.protocol;\
    var js, where = d.getElementsByTagName(s)[0],\
    js = d.createElement(s);\
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));\
</script><div id='pph-hireme'></div>"

あるいは、あなたはすることができます

let test2 = `
<script type='text/javascript'>
(function(d, s) {
    var useSSL = 'https:' == document.location.protocol;
    var js, where = d.getElementsByTagName(s)[0],
    js = d.createElement(s);
    js.src = (useSSL ? 'https:' : 'http:') +  '//www.peopleperhour.com/hire/1002307300/1213788.js?width=300&height=135&orientation=vertical&theme=light&rnd='+parseInt(Math.random()*10000, 10);\
    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' && console.log && e.stack) { console.log(e.stack); } }\
}(document, 'script'));
</script><div id='pph-hireme'></div>
`

これ以上のコメントは大歓迎です

1
Giannis Dallas