在页面重新加载 UseEffect 和 Css 时重置渲染

Question

我从反应开始，我试图制作一个水平滚动页面。它似乎工作得很好，除了一件事，我很确定我为此缺少一些 React 逻辑。我在其中使用了一个 targetContainer div，几个页面（全屏）和一个 Navbuttons class 来移动它。

在我下面的代码中，我使用 'NavButtons' 功能组件来设置 targetContainers 'left' 值。但是当我使用 F5 重新加载页面时，我的页面保持设置样式（例如左：-300%）但是 pageCounter 回到 0，破坏了导航按钮...

我很确定这是因为我使用的是 css 风格，但是 right/best 解决这个问题的方法是什么？

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;

这是一个 stackblitz， https://react-zyvu7o.stackblitz.io/

编辑： https://stackblitz.com/edit/react-zyvu7o?file=src/components/Navbuttons.js

它 'unfortunately' 在 stackblits 上正常工作，但在我的本地主机上不正常...:(

Answer 1

我相当有信心这只是由于浏览器缓存和热重新加载而发生的，这就是为什么它在您的示例中而不是在本地工作的原因。

在页面重新加载 UseEffect 和 Css 时重置渲染

Reset Render on page reload UseEffect and Css

javascript

css

react-dom