Gatsby / React：如何为非JS用户创建干净的备用广告？

Question

无论用户是否禁用JS，我都希望我的网站对用户而言平稳运行。现在，加载微调器出现了一个小问题。我不希望微调器显示给非JS用户。我希望JS用户在页面初始呈现后立即看到微调框。

这是我到目前为止尝试过的：

方法1：

默认情况下隐藏微调框。使它在componentDidMount中可见。这可行，但是当我模拟慢速3G网络中的用户时，安装组件大约需要10秒钟（由于JS加载时间）。将此数字降低到〜0很好。

方法2：

默认情况下隐藏微调框。使用内联JS使它在首次渲染后可见：

document.getElementById('hasJavaScript').style.display = 'block';

这不起作用。我可以将<script>标记放入JSX，但是在Gatsby编译完我的页面之后，我只看到控制台错误显示HTML错误。我可以在编译的HTML中看到这一点：

<script type="text/javascript" class="jsx-1809226535">document.getElementById(&quot;spinner&quot;).style.display = &quot;block&quot;;</script>

方法3：

默认情况下使微调框可见。使用内联<noscript>标签将其隐藏。这具有与方法2相同的问题，还有一些其他问题。

Answer 1

通过避免在CSS定义中使用引号，我可以使用bins <- seq(0, 10, 0.25) histogram(testdata$ratio, type = "count", xlab = "Ratio", breaks = bins) 标签。

<noscript>