Gatsby.js：有一种方法只能在页面加载时呈现组件，而不能在静态页面上呈现

Question

我正在寻找一种使用Gatsby.js React组件的方法，以防止某些部分在生成的静态页面上呈现，并且仅在页面加载到浏览器中时呈现：

<ThisComponentRenderedInStaticPages>
  Content renered in static pages.
  <SomeMagicTagPreventsChildrenToRenderOnStaticPages>
    <ThisItemOnlyRendersOnPageLoad />
  </SomeMagicTagPreventsChildrenToRenderOnStaticPages>
</ThisComponentRenderedInStaticPages>

我应该为它们编译一个单独的程序包，并将其包含在react-helmet元素中吗？

Answer 1

在window是否为undefined的三元检查中包装不需要的静态生成的组件。

typeof window === 'undefined' ? (
  <div>I'm only generated in the browser.</div>
) : null}