3

そのため、gatsby サイトに約 1 秒間オーバーレイを表示して、後ろに正しいブレークポイントをロードできるようにしています。どうすればこれを達成できますか？

そこで、Overlay をロードし、一定時間後に消えるように Interval と State を設定しました。しかし、各ページがオーバーレイをリロードした後に問題が再び発生します。redux のような状態管理はありません。外部リンクからの更新または開始のたびにのみオーバーレイを表示する必要がありますが、内部リンクをクリックする必要はありません。

useEffectマウントでのみレンダリングしてみましたが、内部リンクの変更が再マウントをトリガーするため、これはうまくいきません

Browser API onInitialClientRender を使用できることがわかりました。しかし、そこで生成された値に gatsby-browser.js の外部でアクセスする方法がわかりません。一般に、これらの API の使用方法を理解するのに問題があります。

customHooks.js

export function useInterval(callback, delay) {
  const savedCallback = useRef()

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback
  }, [callback])

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current()
    }
    if (delay !== null) {
      let id = setInterval(tick, delay)
      return () => clearInterval(id)
    }
  }, [delay])
}

Layout.js

let [loadingIndicator, setLoadingIndicator] = useState(true)
const delay = 500

useInterval(() => {
  setLoadingIndicator(false)
}, delay)

したがって、期待される結果は、最初のクライアント レンダリングで、オーバーレイをレンダリングするように指示する状態を設定するように指示する方法であり、この 1 つのレンダリングの後、オーバーレイのレンダリングを無効にするように状態を変更する必要があります。

4

2 に答える 2

2

解決：

静的 index.html ファイルを変更する gatsby の機能を使用します。[Gatsby で Index.html をカスタマイズ][1]

生成された html.js にカスタム div を追加する

html.js:

   <div
      key={`loader`}
      id="___loader"
      style={{
        alignItems: "center",
        backgroundColor: "#F2F2F2",
        display: "flex",
        justifyContent: "center",
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 1,
      }}
   >
      <LoaderSVG width="50%" />
   </div>

および gatsby-browser.js で:

gatsby-browser.js:

export const onInitialClientRender = () => {
  document.getElementById("___gatsby").style.display = "block"
  setTimeout(function() {
    document.getElementById("___loader").style.display = "none"
  }, 200)
}

次のステップは、すべてのデータがロードされたかどうかを確認し、タイムアウトの代わりに動的な値を追加することです。

于 2019-07-25T08:35:19.463 に答える