javascript - Twitter "Follow"按钮没有出现。只有文字

Question

首先，我阅读了this , this和 this以及许多其他关于“Twitter 按钮不呈现”的内容。他们都没有解决我的问题。

我有两个彼此靠近的 Twitter 按钮。 Tweet按钮呈现正常，Follow按钮不呈现。无论是在 FF 中还是在 Chrome 中，都不会向控制台抛出错误或警告。推特小部件 <script>代码没问题 - 我复制/粘贴它，没有错别字或任何东西。

显然，该问题与 Twitter 小部件未在页面中加载无关，因为“Tweet”按钮显示得很好。

但是 Twitter 添加到 <a> 的类名很奇怪按钮元素 - twitter-follow-button-error .整个谷歌只有两个关于这个类的结果，两个都是不相关的。 Twitter API 文档对此没有任何说明。

它可以是什么？这是原因吗？如何解决？

<div key={key}>
    {/* Follow doesn't render */}
    <a className="twitter-follow-button" 
       href={href} data-size="large" 
       data-show-screen-name="true" 
       data-show-count="true">Follow</a>

    {/* Tweet renders all right */}
    <span className={`${css.btn_dist}`}>
        <a className="twitter-share-button"  
           href={href}  
           lang="en" 
           data-size="large">Tweet</a>
    </span>
</div>

Answer 1

我可以使用 chrome 61.0.3163.100(官方版本)(64 位)重现您的错误。

当您按 F12 并加载页面时，它将在推特 JavaScript 中中断，拒绝 promise c.reject(new Error("cannot hydrate widget before it is initialized"))

控制台中没有错误，但它在我的 Chrome 版本中因出现此错误而暂停。跟随链接有一个使用以下代码的 twitter-follow-button-error 类:

    <a class="twitter-follow-button" 
    href="http://www.wut.com" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a>

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

当使用有效的 href 时，错误消失了:

    <a class="twitter-follow-button" 
    href="https://twitter.com/TwitterDev" data-size="large" 
    data-show-screen-name="true" 
    data-show-count="true">Follow</a>

    <script type="text/javascript" async src="https://platform.twitter.com/widgets.js"></script>

确保你的开发工具在异常时暂停(我不必检查在捕获异常时暂停)