Disqus的count.js脚本在index.html上没有与react.js网站正常运行

Question

我一直有一段时间让评论计数脚本在我的反应页面上工作。 首先，他们建议将脚本放在我的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 。 当我加载我的页面时，我希望我的评论数量会上升，但没有这样的运气。 为了测试这一点，我从raw count.js脚本（位于此处）复制了原始脚本（未更改）。 然后我将它直接粘贴到Chrome的devtools控制台上，它起作用了; 所有相关的评论计数器都达到了适当的值。

编辑：一天后，更多的刺激; 我在disqus.com域的实际代码中添加了断点。 脚本标记中的脚本在正确的时间运行正常，除了它进入displayCount（）函数时缺少变量。 有几个变量只是没有给定值，所以它不能进入并填充注释计数，它总是失败。 当我从index.html中调用它时，我不知道为什么会失败，但是当我将原始count.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 ： 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永远不会使用新信息进行更新。 这是另一个可怕的脚本表现不同的例子，尽管以完全相同的方式被调用......

Answer 1

好吧，在与Disqus的支持人员来回多次来回后，我终于找到了答案; 我很接近。 解决方案是：

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

事实证明我必须传递reset:true param，这使得getCount一大块代码能够实际执行某些操作。 我想我可以从代码中找出这一点，但我责怪强烈缩小的格式（即使使用chrome dev工具帮助美化它）也让我错过了。 它也是在他们的知识库文章中关于如何添加评论计数器，但我错过了它的背景（并被'事实'吸收'显然必须是脚本不工作，显然'）。

因此，结束了我最令人沮丧的几天编码之一。 这是一个有用的教训...退后一步，不时地看一下大局，因为答案可以盯着你。

Disqus的count.js脚本在index.html上没有与react.js网站正常运行

问题描述

1 个解决方案

解决方案1
4 已采纳 2016-05-09 03:19:07

Disqus的count.js脚本在index.html上没有与react.js网站正常运行

问题描述

1 个解决方案

解决方案1 4 已采纳 2016-05-09 03:19:07

解决方案1
4 已采纳 2016-05-09 03:19:07