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

Question

我正在使用 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，无论如何。 我猜这是某种定义错误，codeandbox.io 有，而我没有。

在App函数上也试过如下调试，同样返回0：

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

我如何在 localhost 上运行我的代码，该代码可以在代码沙盒中运行？

Answer 1

您的<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>