0

更新：以下已解决，但我遇到了类似的问题：

在我的图库模板中（对于示例页面，请参见此处，如果通过站点导航到，一切都会正常加载。刷新时，网格父 div（样式组件中的 GalleryGrid）被擦除/取消样式/替换为空白 div。这实际上发生在在盖茨比补水期间刷新。

我尝试用手动设置样式的常规 div 替换样式组件，但没有成功。不知道发生了什么！

我遇到了一个非常奇怪的错误！

我使用 Gatsby 构建了一个网站，从 Prismic.io 采购，并使用 styled-components 来设置样式。我使用 framer-motion 进行页面转换，并将我的布局组件添加到 gatsby-browser，以便仅转换页面内容，并向 gatsby-ssr 添加类似的代码以修复一些初始 ssr 错误。

现在发生的情况是，每当直接访问索引以外的页面时（试试这个），某些组件不会正确呈现。在此示例中，页面顶部的日期被替换为<Body>组件（其样式与预期<Date>组件不同），实际内容已被截断，仅显示第一个<p>.

如果您导航到“投资组合”部分，然后导航回目录页面，页面将正确显示 - 日期现在是一个<Date>组件并显示整个正文文本。

'essay' 节点也会发生类似的错误 - 例如，在此页面上，图像本应位于一个被调用的组件中，但在刷新或直接访问（而不是通过站点导航导航到该页面）时ImageContainer被一个额外的组件替换。EssayContainer

老实说，我不知道这里发生了什么或可能导致此错误的原因 - 无论是我做错了什么还是这是 Gatsby 的 SSR 或 styled-components/gatsby SC 插件中的错误。它在运行时按预期工作gatsby develop，因此必须是构建或 SSR 中的某些内容。

我的盖茨比浏览器：

const transitionDelay = 500

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

export const shouldUpdateScroll = ({
  routerProps: { location },
  getSavedScrollPosition,
}) => {
  if (location.action === "PUSH") {
    window.setTimeout(() => window.scrollTo(0, 0), transitionDelay)
  } else {
    const savedPosition = getSavedScrollPosition(location)
    window.setTimeout(
      () => window.scrollTo(...(savedPosition || [0, 0])),
      transitionDelay
    )
  }
  return false
}

还有我的 gatsby-ssr：

const transitionDelay = 500

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

我的回购在这里。

任何帮助是极大的赞赏！

4

1 回答 1

0

原来这是两个问题！

在构建时交换某些组件的问题是由于我使用的媒体查询库react-responsive- 没有 SSR 支持。我迁移到@artsy/fresnel并解决了很多问题。

内容被截断的问题似乎是样式组件不能很好地与 SSR 配合使用的问题。我直接设置了内部 HTML 的样式组件 - 在组件内嵌套另一个 div 并从那里设置 html 就可以了：

<Description>
          <div
            dangerouslySetInnerHTML={{
              __html: data.prismicGallery.data.description.html,
            }}
          />
        </Description>

这几乎解决了所有问题 - 我仍然对盖茨比的水合作用替换/取消某些元素的样式有问题，但我怀疑这是一个不同的问题（添加到原始问题）。

于 2020-02-07T03:50:08.950 回答