reactjs React -渲染后滚动到页面顶部

um6iljoc 于 2023-06-05 发布在 React

关注(0)|答案(1)|浏览(203)

我的React组件如下：

var ContentBox = React.createClass({

  componentDidMount:function() {
    this.getContents();
  },

  getContents:function() {
    $.ajax({
      url : ......
      success:function(contents) {
        this.setState({
          contents : contents
        });
      }.bind(this)
    });
  },

  componentDidUpdate:function() {
    ReactDOM.findDOMNode(this).scrollTop = 0;
  }
});

从本质上讲，我想做的是，当页面呈现时，我想滚动到页面的顶部。“内容”根据路由参数而变化。
我已经尝试了Scroll to the top of the page after render in react.js中给出的解决方案，但它对我不起作用。
更新：以下工作

componentDidUpdate:function() {
    ReactDOM.findDOMNode(this).scrollIntoView();
  }

为什么ReactDOM.findDOMNode(this).scrollTop = 0;不工作？另外，我尝试了$(window).scrollTop()，但它也不起作用。我试着把它们放在 AJAX 请求的“success”函数中，但也不起作用。

reactjs

来源：https://stackoverflow.com/questions/33758744/react-scroll-to-the-top-of-the-page-after-rendering

1条答案

按热度按时间

pcww981p1#

对于react-router-dom v6+

1.打开App.js文件并导入：

import { Route, Routes, useLocation } from "react-router-dom";
import { useLayoutEffect } from "react";

1.在“App”函数上方创建一个scrollTop函数：

const scrollTop = ({ children }) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children;
};

1.在scrollTop函数中 Package 路由：

function App() {
  return (
    <div className="App">
      <scrollTop>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </scrollTop>
    </div>
  );
}

这里是完整的代码👇

// Import all the pages (Home, about, service, contact)

import { Route, Routes, useLocation } from "react-router-dom";
import { useLayoutEffect } from "react";

const scrollTop = ({ children }) => {
  const location = useLocation();
  useLayoutEffect(() => {
    document.documentElement.scrollTo(0, 0);
  }, [location.pathname]);
  return children;
};

function App() {
  return (
    <div className="App">
      <scrollTop>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/service" element={<Service />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </scrollTop>
    </div>
  );
}

export default App;

赞(0）回复(0）举报 2023-06-05

我来回答

reactjs React -渲染后滚动到页面顶部

1条答案

对于react-router-dom v6+

相关问题

热门标签

最新问答