javascript - 来自 dangerouslySetInnerHTML 的完全相同的代码不能仅在 Gatsby/ReactJS 页面内工作

Question

我正在尝试使用 React 在 Gatsbyjs 网站上创建一个页面。

页面代码是

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

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>
`

const ContactPage = () => (

    <div>
        <h1>ContactPage</h1>

        <h2>Direct Contact</h2>
        <p>For anything you need or want to ask send me a message at <strong><a href='mailto:giannisdallas81@gmail.com'>
            giannisdallas81@gmail.com
        </a></strong>
        </p>
        <h2>Hire me online</h2>
        <p><a href="https://www.upwork.com/o/profiles/users/_~0168d059ac7bbd584a/">Find me on Upwork</a></p>
        <p>{test2}</p>
        <p
            dangerouslySetInnerHTML={{ __html: test2 }}
          />
        <Link to="/">Back to my homepage</Link>

    </div>

)

export default ContactPage

我正在使用 dangerouslySetInnerHTML 来显示每小时人数脚本，但该脚本在页面内保持不活动/隐藏状态。 See the end result here 奇怪的是，当我将生成的 HTML 复制到此处或 Codepen 上的代码片段时，您接下来会看到完全相同的 HTML。

<div><h1>ContactPage</h1><h2>Direct Contact</h2><p><!-- react-text: 19 -->For anything you need or want to ask send me a message at <!-- /react-text --><strong><a href="mailto:giannisdallas81@gmail.com">giannisdallas81@gmail.com</a></strong></p><h2>Hire me online</h2><p><a href="https://www.upwork.com/o/profiles/users/_~0168d059ac7bbd584a/">Find me on Upwork</a></p><p>
&lt;script type='text/javascript'&gt;
(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&amp;height=135&amp;orientation=vertical&amp;theme=light&amp;rnd='+parseInt(Math.random()*10000, 10);    try { where.parentNode.insertBefore(js, where); } catch (e) { if (typeof console !== 'undefined' &amp;&amp; console.log &amp;&amp; e.stack) { console.log(e.stack); } }}(document, 'script'));
&lt;/script&gt;&lt;div id='pph-hireme'&gt;&lt;/div&gt;
</p><p>
<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>
</p><a href="/">Back to my homepage</a></div>

如果我做错了什么，你能告诉我吗？ 你能解释一下这两个代码之间的区别吗？ 我是否需要以不同的方式包含嵌入代码？

Answer 1

在 React 中，需要 DOM 节点的初始化代码应该设置在 componentDidMount() ( source ) 中。

我不是 100% 确定为什么您的代码无法正常工作，但我猜它与 DOM 差异有关。

我通过使用类组件使其工作如下:

import React, { Component } from 'react';
import Link from 'gatsby-link';

class ContactPage extends Component {
  loadHireMe(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);
      }
    }
  }

  componentDidMount() {
    this.loadHireMe(document, 'script');
  }

  render() {
    return (
      <div>
        <h1>ContactPage</h1>

        <h2>Direct Contact</h2>
        <p>
          For anything you need or want to ask send me a message at{' '}
          <strong>
            <a href="mailto:giannisdallas81@gmail.com">
              giannisdallas81@gmail.com
            </a>
          </strong>
        </p>
        <h2>Hire me online</h2>
        <p>
          <a 
href="https://www.upwork.com/o/profiles/users/_~0168d059ac7bbd584a/">
            Find me on Upwork
          </a>
        </p>
        <div id="pph-hireme" />
        <Link to="/">Back to my homepage</Link>
      </div>
    );
  }
}

export default ContactPage;

编辑:

类似的问题已经存在here