reactjs - 将函数应用于每个 React 组件

Question

我需要componentDidMount()在每个反应组件中添加以下内容。

要添加的代码：

window.scrollTo(0, 0);

如果不将其写入每个组件，我怎么能做到这一点？

标签： reactjs

Answer 1

如果你使用 react-router，你可以创建一个 ScrollToTop 组件：

import { useEffect } from "react";
    import { withRouter } from "react-router-dom";

    const ScrollToTop = ({ children, location: { pathname } }) => {
      useEffect(() => {
        window.scrollTo({
          top: 0,
          left: 0,
          behavior: "smooth"
        });
      }, [pathname]);

      return children || null;
    };

    export default withRouter(ScrollToTop);

并将您的应用程序包装在其中：

<Router>
        <ScrollToTop>
           <App />
        </ScrollToTop>
</Router>