reactjs - React Router ScrollToTop 不适用于 Material UI

Question

我正在为一个相当简单的网站使用 Material UI，但我在使用 ScrollToTop 时遇到了问题。我已按照文档进行操作，但似乎找不到我的代码的问题。所需的功能是每次单击链接时，页面都会在顶部加载。相反，当单击时，页面会发生变化，但会呈现在与前一个相同的位置。见下文 - 我已经简化了代码，这样你就不会被一堆文字所困扰。

参考文档：https ://reacttraining.com/react-router/web/guides/scroll-restoration

根组件

const homePage = () => (<Home />);
const helpPage = () => (<Help />);
const termsPage = () => (<Markdown>{terms}</Markdown>);
const privacyPage = () => (<Markdown>{privacy}</Markdown>);

class Header extends React.Component {

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Link className={classes.link} to="/"><Typography>Home</Typography></Link>
              <Link className={classes.link} to="/help"><Typography>Help</Typography></Link>
              <IconButton onClick={this.props.logOut} className={classes.headerIcon}>
                <AccountCircleIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <main className={classes.content}>
            <div className={classes.toolbar} />
            <Route exact path="/" component={homePage} />
            <Route path="/help" component={helpPage} />
            <Route path="/terms" component={termsPage} />
            <Route path="/privacy" component={privacyPage} />
            <Footer />
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}

标签： reactjsreact-routermaterial-ui

Answer 1

我发现了问题的根源。ScrollToTop 函数引用了window，但有问题的内容被呈现在mainMaterial UI Header 下的元素中。我的解决方案是引用main元素 - 问题解决了。见下文。

class Header extends React.Component {
  main = null;

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.main.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Link className={classes.link} to="/"><Typography>Home</Typography></Link>
              <Link className={classes.link} to="/help"><Typography>Help</Typography></Link>
              <IconButton onClick={this.props.logOut} className={classes.headerIcon}>
                <AccountCircleIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <main ref={(ref) => { this.main = ref; }} className={classes.content}>
            <div className={classes.toolbar} />
            <Route exact path="/" component={homePage} />
            <Route path="/help" component={helpPage} />
            <Route path="/terms" component={termsPage} />
            <Route path="/privacy" component={privacyPage} />
            <Footer />
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}

----Edits---- 按照 Pier 的建议使用 React.createRef()

class Header extends React.Component {
 constructor(props) {
    super(props);
    this.main = null;
    this.setMainRef = (element) => {
      this.main = element;
    };
  }

  componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      this.main.scrollTo(0, 0);
    }
  }

  render() {
    return (
      <MuiThemeProvider theme={darkTheme}>
        <div className={classes.root}>
          <AppBar position="absolute" className={classes.appBar}>
            <Toolbar>
              <Link className={classes.link} to="/"><Typography>Home</Typography></Link>
              <Link className={classes.link} to="/help"><Typography>Help</Typography></Link>
              <IconButton onClick={this.props.logOut} className={classes.headerIcon}>
                <AccountCircleIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
          <main ref={this.setMainRef} className={classes.content}>
            <div className={classes.toolbar} />
            <Route exact path="/" component={homePage} />
            <Route path="/help" component={helpPage} />
            <Route path="/terms" component={termsPage} />
            <Route path="/privacy" component={privacyPage} />
            <Footer />
          </main>
        </div>
      </MuiThemeProvider>
    );
  }
}