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中断，拒绝承诺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>

确保你的开发工具暂停异常（我没有检查被捕异常的暂停）

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

1 个答案: