Twitter“关注”按钮没有出现。只有文字

Question

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

我有两个彼此靠近的 Twitter 按钮。 Tweet 按钮渲染正常，Follow 按钮不渲染。在 FF 和 Chrome 中都没有向控制台抛出错误或警告。 Twitter 小部件<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 并加载页面时，它会在 twitter 中中断 JavaScript 拒绝承诺 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>

确保您的开发工具在异常时暂停（我不必检查捕获的异常时的暂停）