来自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:[email protected]'>
            [email protected]
        </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:[email protected]">[email protected]</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中，应该在componentDidMount()（source）中设置需要DOM节点的初始化代码。

我不是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:[email protected]">
              [email protected]
            </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;

Edit:

类似的问题已经存在here