Disqus的计数.js脚本在索引中无法正常运行.html与react.js网站

Disqus's count.js script doesn't run properly in index.html with react.js website

本文关键字：js html 正常运行 网站 react 索引 脚本 Disqus      更新时间：2023-09-26

我一直在努力让评论计数脚本在我的反应页面上工作。首先，他们建议将脚本放在我的 index.html 文件中，位于 <body> 标签的底部。我已经这样做了，但没有看到任何结果。

  <body>
    <div id="app">
    </div>
    <script src="static/index.js"></script>
    <script id="dsq-count-scr" src="//mtg-hunter.disqus.com/count.js" async></script>
  </body>

我有一个 index.js 文件正在加载我的所有组件，包括组件(我们称之为 ResultComponent.js(，我想在其中输入注释计数<span>标签。<span>标签本身如下所示：

var commentCount = <span className="disqus-comment-count" onClick={function() {this.setState({currentSelectedTab: 4})}.bind(this)} 
			data-disqus-identifier={idGoesHere}
			style={{fontVariant:"small-caps"}}>0 Comments</span>

到目前为止，如此简单。我没有使用任何<a>标签，所以我在任何地方都没有#disqus_thread。当我加载我的页面时，我希望我的评论数量会增加，但没有这样的运气。为了测试这一点，我从原始计数脚本(位于此处(复制了原始脚本，原.js原封不动。然后我把它直接粘贴到 Chrome 的 devtools 控制台中，它工作了;所有相关的评论计数器都转到了适当的值。

编辑：一天后，更多的刺激;我在 disqus.com 域的实际代码中添加了断点。脚本标记中的脚本在正确的时间运行良好，除了它在进入 displayCount(( 函数时缺少变量。有几个变量只是没有给出值，所以它无法进入并填充注释计数，它总是失败。我不知道为什么从我的索引中调用它时会失败.html但当我将原始计数.js代码粘贴到我的控制台并在那里时却没有。不知道为什么。

澄清一下，这是相关的代码：

e.displayCount = function(b) {
        for (var c, a, d, e = b.counts, b = b.text.comments; c = e.shift(); )
            if (a = j[c.id]) {
                switch (c.comments) {
                case 0:
                    d = b.zero;
                    break;
                case 1:
                    d = b.one;
                    break;
                default:
                    d = b.multiple
                }
                c = d.replace("{num}", c.comments);
                a = a.elements;
                for (d = a.length - 1; d >= 0; d--)
                    a[d].innerHTML = c
            }
    }
    ;
当它正常运行时，从我将脚本粘贴到控制台中，定义了j变量。当它从 index.html 调用运行时，j是未定义的，因此它在第一个if失败。在两种情况下，调用 url 完全相同：http://mtg-hunter.disqus.com/count-data.js?1=19767&1=235597&1=373322&1=382310&1=382841&1=382866&1=383023&1=397543&1=397682&1=398434 。这给出了b参数，当我在本地运行脚本时，它会定义j以便 if 中的赋值运算符可以工作(这是一种非常奇怪的方法，但没关系(。

再次编辑：我应该指出我正在本地测试服务器(localhost:3000(上执行此操作，不确定这是否有区别？

编辑更多：我上述问题的答案是"否"。我将代码上传到服务器，生产站点还显示脚本未正常运行。这太荒谬了...我现在没有想法了。

再次编辑更多： 部分突破...我将这段代码添加到 ResultComponent.js：

    componentDidMount() {
    	DISQUSWIDGETS.getCount();
    },
    componentDidUpdate() {
    	DISQUSWIDGETS.getCount();
    },

好消息;当我刷新页面时，它会显示正确的评论计数！万岁！坏消息：当我更改隐藏 Result 组件的页面部分，然后将其恢复(触发componentDidUpdate(时，DISQUSWIDGETS.getCount()调用不起作用。它仍然被调用，但脚本的displayCount部分永远不会被调用，因此 DOM 永远不会使用新信息进行更新。这是这个可怕的脚本行为不同的另一个例子，尽管以完全相同的方式调用......

好的，在与Disqus的支持人员来回反复之后，我终于找到了答案;我离得很近。解决方案是：

    componentDidMount() {
    	DISQUSWIDGETS.getCount({reset:true});
    },
    componentDidUpdate() {
    	DISQUSWIDGETS.getCount({reset:true});
    },

事实证明，我必须传递reset:true参数，这使得getCount中的一大块代码能够实际执行某些操作。我想我可以从代码中弄清楚这一点，但我责怪我错过了严重缩小的格式(即使有 chrome 开发工具帮助美化它(。它也在他们的知识库文章中介绍如何添加评论计数器，但我错过了它的上下文(并被"显然必须是脚本不起作用，显然"的"事实"所吸引(。

我最令人沮丧的几天编码就这样结束了。还有一个有用的教训...退后一步，时不时地看看大局，因为答案可能会盯着你的脸。

相关文章：