0

我正在使用交叉点观察器在用户向下滚动页面时延迟加载我的组件，但与组件关联的 page-data.json 文件正在页面加载时呈现。

这是我如何动态呈现组件的示例。

import React from "react"
import { useSelector } from "react-redux"
import loadable from "@loadable/component"

const CategoryLoadable = props => {
const intersectState = useSelector(state => state.intersectState)

const Category = intersectState.categoryComponent && loadable(() => import("./category"))

return (
   <>{intersectState.categoryComponent ? <Category {...props} /> : null}</>
 )
}

export default React.memo(CategoryLoadable)

如何延迟加载 page-data.json 文件以减少初始网络调用？

这是我的 gatsby-ssr

import wrapWithProvider from "./src/store/ReduxWrapper"
import CustomLayout from "./wrapPageElement"

const wrapRootElement = wrapWithProvider
export const wrapPageElement = CustomLayout

export { wrapRootElement }

这是我的自定义布局

import React from "react"
import Layout from "./src/components/layout/layout"

// Pass all props (hence the ...props) to the layout component so 
it has access to things like pageContext or location
const wrapPageElement = ({ element, props }) => (
  <Layout {...props}>{element}</Layout>
)

export default wrapPageElement
4

0 回答 0