我從反應(yīng)開始,嘗試制作一個(gè)水平滾動(dòng)頁面。除了一件事之外,它似乎工作得很好,其中我很確定我缺少一些 React 邏輯。我使用一個(gè) targetContainer div,其中包含幾個(gè)頁面(全屏)和一個(gè) Navbuttons 類來移動(dòng)它。在下面的代碼中,我使用“NavButtons”功能組件來設(shè)置 targetContainers“l(fā)eft”值。但是當(dāng)我用 F5 重新加載頁面時(shí),我的頁面保持設(shè)置的樣式(例如 left:-300%),但 pageCounter 返回到 0,破壞了導(dǎo)航按鈕...我很確定它是因?yàn)槲沂褂玫氖?css 樣式,但是解決這個(gè)問題的正確/最佳方法是什么?import React, { useEffect, useState } from 'react';const NavButtons = (props) => { const maxCount = props.maxCount; const [pageCounter, setPageCounter] = useState(0); const scrollPrev = function () { if (pageCounter > 0) { setPageCounter(pageCounter - 1); } } const scrollNext = function () { if (pageCounter < (maxCount - 1)) { setPageCounter(pageCounter + 1); } } useEffect(() => { props.targetContainer.current.style.left = -((pageCounter) * 100) + 'vw'; }, [pageCounter, props.targetContainer]); useEffect(() => { setToZero(); }, []); const setToZero = function () { setPageCounter(0); props.targetContainer.current.style.left = 0; } return ( <div className="NavButtons"> <button onClick={scrollPrev}>Prev</button> <button onClick={scrollNext}>Next</button> </div> )}export default NavButtons;這是一個(gè) stackblitz, https://react-zyvu7o.stackblitz.io/編輯: https://stackblitz.com/edit/react-zyvu7o?file =src/components/Navbuttons.js“不幸的是”它在 stackblits 上正常工作,但在我的本地主機(jī)上卻不起作用......:(
在頁面重新加載時(shí)重置渲染 UseEffect 和 Css
HUX布斯
2023-10-14 09:56:24