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

Question

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

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

我很确定它是因为我使用的是 css 样式，但是解决这个问题的正确/最佳方法是什么？

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

“不幸的是”它在 stackblits 上正常工作，但在我的本地主机上却不起作用......:(

Answer 1

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