第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在頁面重新加載時(shí)重置渲染 UseEffect 和 Css

在頁面重新加載時(shí)重置渲染 UseEffect 和 Css

HUX布斯 2023-10-14 09:56:24
我從反應(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ī)上卻不起作用......:(
查看完整描述

1 回答

?
青春有我

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超8個(gè)贊

我相當(dāng)有信心這只會(huì)由于瀏覽器緩存和熱重載而發(fā)生,這就是它在您的示例中工作而不是在本地工作的原因。



查看完整回答
反對(duì) 回復(fù) 2023-10-14
  • 1 回答
  • 0 關(guān)注
  • 124 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)