React公用scrollToTop（返回顶部）组件

最新推荐文章于 2025-03-12 15:36:37 发布

Cassy_Wu

最新推荐文章于 2025-03-12 15:36:37 发布

阅读量2.4k

点赞数 1

分类专栏： React 文章标签： react reactjs javascript

本文链接：https://blog.youkuaiyun.com/Cassy_Wu/article/details/106868848

版权

React 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在React中创建一个公用的scrollToTop组件，用于实现页面切换或特定操作后自动返回页面顶部，提升用户体验。通过在根组件引用该组件，并简单说明了组件的扩展性和使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在web页面要兼容各种设备，部分页面的内容长度在手机端就显得过于冗长。除了给客户提供一个按钮，一键返回顶部。更好的客户体验就是当客户做某种操作的时候，就自动滚动到顶端。这样就能顺畅的进行接下来的操作了。

目前我所接触到需要自动返回顶部的需求分为两种

当客户切换页面时
当客户当前页面进行某些操作或者顶端显示错误信息

总共两个步骤

1.创建一个单独的组件

import { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { ACTION_ONE, ACTION_TWO } from '../actions/actionTypes';

class ScrollToTop extends Component {
  componentDidMount () {
    const store = this.props.store;
    /**
     * @function 匿名函数: 通过store.subscribe监听最新的action，如果类型符合，就执行返回顶部
     *
     * */
    store.subscribe(() => {
      const actionType = store.getState().lastAction.type;
      switch (actionType) {
        case ACTION_ONE:
        case ACTION_TWO:
          window.scrollTo(0, 0);
          break;
        default: break;
      }
    });
  }

  componentDidUpdate (prevProps) {
    /**
     * 当route路径发生变化的时候，执行返回顶部
     * */
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }

  render () {
    return null;
  }
}

export default withRouter(ScrollToTop);

在根文件上引用这个组件（index.js / app.js）

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import configureStore from '../../store/configureStore';
import Reducer from './reducers';
import {Route, Switch, HashRouter as Router, Redirect} from 'react-router-dom';
import Home from './pages/Home';
import View from './pages/View';
import ScrollToTop from './components/ScrollToTop';
import initialState from './initialState';

const store = configureStore(initialState, Reducer);

ReactDOM.render(
<Provider store={store}>
    <Router>
        <div>
            <ScrollToTop store={store} />
            <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/view' component={View} />
            </Switch>
        </div>
    </Router>
</Provider>,
document.getElementById('app')
);