相关疑难解决方法(0)

在React中处理滚动位置的正确方法是什么？因为更好的用户体验,我真的很喜欢平滑滚动.因为在React中操作DOM是一种反模式我遇到了问题:如何平滑地滚动到某个位置/元素？我通常会更改元素的scrollTop值,但这是对DOM的操作,这是不允许的.

JSBIN

码:

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap, …

有没有办法禁用某些现代浏览器(Chrome和Safari)在页面刷新时记住滚动位置的行为？

我正在使用 Gatsby 2.2.10 设置网站，并且链接组件保留上一页的滚动位置，并且在单击它们时不会滚动回顶部。

<div className="Footer__legal body">
 <p>© {new Date().getFullYear()} My Nice Company</p>
 <Link to="/privacy-policy">Privacy Policy</Link>
 <Link to="/page-2">Page 2 Link component</Link>
</div>

预期行为：

当您单击“隐私政策”、“第 2 页”或网站底部的任何页面时，我希望页面加载时用户回到顶部。

实际行为：

用户停留在当前页面的滚动位置

使用 react-router 导航时，我遇到了滚动问题。

当我导航到不同的组件时，它会保持上次导航的滚动位置。但是，我希望它在导航更改时恢复并从顶部开始。

 class App extends Component{
  render() {
   return(
    <BrowserRouter onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
      <div style={{display: 'flex'}}>
        <div className='navBar'>
          <ul style={{listStyleType: 'none'}}>
            <li><Link to='/'>Home</Link></li>
            <li><Link to='/towns'>Towns</Link></li>
            <li><Link to='/pubs'>Pubs</Link></li>
            <li><Link to='/venues'>Venues</Link></li>
            <li><Link to='/cinemas'>Cinemas</Link></li>

          </ul>
        </div>

        <div style={{flex:1, padding:'0px'}}>
          {routes.map((route) => (
            <Route
              key={route.path}
              path={route.path}
              exact={route.exact}
              component={route.main}
              />
            ))}
          </div>
        </div>
      </BrowserRouter>
     )
   }
 }

但是它不起作用。我感觉问题出在我的导航风格上，而不是 window.scrollTo() 片段。

我正在尝试使PrivateRoute组件做出反应。这是我的高阶部分。你能告诉我这是什么问题吗？

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

export default ({ component: Component, ...rest }) => {
  class PrivateRoute extends React.Component {
    render() {
      console.log("This is private route called");
      if (this.props.profile) {
        return (
          <Route
            {...rest}
            render={props =>
              this.props.profile.loggedIn === true ? (
                <Component {...props} />
              ) : (
                <Redirect to="/login" />
              )
            }
          />
        );
      }
    }
  }

  const mapStateToProps = state => ({
    profile: state.profile
  });
  return connect(mapStateToProps)(PrivateRoute); …