Iro*_*Man 11 javascript disqus reactjs
我一直有一段时间让评论计数脚本在我的反应页面上工作.首先,他们建议将脚本放在<body>标签底部的index.html文件中.我做到了这一点,看不到任何结果.
<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.这给出了b参数,当我在本地运行脚本时,它定义j为if中的赋值运算符可以工作(这是一种非常奇怪的方式,但是没问题).
再次编辑:我应该指出我在本地测试服务器上执行此操作(localhost:3000),不确定这是否有所作为？
编辑更多:上述问题的答案结果是"不".我将我的代码上传到我的服务器,生产站点也显示脚本运行不正常.这很荒谬......我现在已经没有想法了.
再次编辑:部分突破......我将此代码添加到ResultComponent.js:
componentDidMount() {
DISQUSWIDGETS.getCount();
},
componentDidUpdate() {
DISQUSWIDGETS.getCount();
},好消息; 当我刷新页面时,它显示正确的评论计数!万岁!坏消息:当我更改隐藏结果组件的页面部分,然后将其恢复(触发componentDidUpdate)时,DISQUSWIDGETS.getCount()调用不起作用.它仍然被调用,但displayCount脚本的一部分永远不会被调用,因此DOM永远不会使用新信息进行更新.这是另一个可怕的脚本表现不同的例子,尽管以完全相同的方式被调用...
好吧，在与 Disqus 的支持人员反复讨论之后，我终于找到了答案；我很接近。解决办法是：
componentDidMount() {
DISQUSWIDGETS.getCount({reset:true});
},
componentDidUpdate() {
DISQUSWIDGETS.getCount({reset:true});
},结果我必须传递reset:true参数，这使得一段代码getCount能够真正执行某些操作。我想我可以从代码中弄清楚这一点，但我将其归咎于高度压缩的格式（即使使用 Chrome 开发工具帮助美化它），因为我错过了这一点。他们的知识库文章中也有关于如何添加评论计数器的内容，但我错过了它的上下文（并被“事实”所吸引，“显然，这显然是脚本不起作用”）。
我最沮丧的几天编码生涯之一就这样结束了。这是一个有用的教训……时不时地退后一步，看看大局，因为答案可能就在你面前。
| 归档时间： |
|
| 查看次数： |
859 次 |
| 最近记录： |