相同的功能在React中的不同平台上不起作用

问题描述

我正在使用React JS库跟踪用户的滚动高度并根据接收到的数据应用功能。

它在Codesandbox.io上可以正常工作，但是一旦我在npm localhost上运行它，即使我使用的是完全相同的代码，它也不存在。

这是我要在localhost上应用的函数，但始终返回0：

//Scroll event listener to change menu background color
const ScrollingElement = () => {
  const [scrollY,setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll",logit);
    }
    watchScroll();
    // Remove listener (like componentwillUnmount)
    return () => {
      window.removeEventListener("scroll",logit);
    };
  },[]);
  console.log(scrollY);
  return scrollY;
}

我试图调试scrollY变量，在localhost上无论如何我总是收到0值。 我猜这是codesandBox.io有的定义错误，我没有。

还尝试对App函数进行以下调试，并返回0：

function App() {
  console.log(ScrollingElement());
  return (
    <div>
      <Menu scrollHeight={ScrollingElement()}></Menu>
      <Home></Home>
    </div>
  );
}

如何在可在codeandBox中运行的localhost上运行代码？

解决方法

您的<ScrollingElement />在工作，但是您需要确保父组件实际上是可滚动的。最简单的解决方案是创建新的<Wrapper />组件并使用CSS设置其高度。

function Wrapper() {
  return (
    <div style={{height: "200vh"}}>
      <ScrollingElement />
    </div>
  );
}

可运行的示例：

const {useState,useEffect} = React;

function Wrapper() {
  return (
    <div style={{height: "200vh",backgroundColor: "beige"}}>
      <ScrollingElement />
    </div>
  );
}

const ScrollingElement = () => {
  const [scrollY,setScrollY] = useState(0);

  function logit() {
    setScrollY(window.pageYOffset);
  }

  useEffect(() => {
    function watchScroll() {
      window.addEventListener("scroll",logit);
    }
    watchScroll();

    return () => {
      window.removeEventListener("scroll",logit);
    };
  },[]);

  console.log(scrollY);
  return scrollY;
}

ReactDOM.render(<Wrapper/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>