属性“ unlisten”在类型“ component”上不存在

时间:2019-04-11 09:35:42

标签: reactjs react-router

更改路线后,我想滚动到页面顶部。我将使用react-router的{​​{1}}挂钩。但是,它说history.listen

这似乎不是一个复杂的问题,但我不知道出了什么问题。请不要建议其他方法,而应解释此错误的解决方案。我只想消除此错误。

这是我使用的代码段

Property 'unlisten' does not exist on type 'ScrollToTop'.

1 个答案:

答案 0 :(得分:0)

您应该像这样创建状态unlisten

import { RouteComponentProps, withRouter } from "react-router-dom";
import { UnregisterCallback } from 'history';

interface IScrollToTopState {
  unlisten: UnregisterCallback;
}
class ScrollToTop extends Component<RouteComponentProps, IScrollToTopState> {
  state: IScrollToTopState = {
    unlisten: null
  };

  componentDidMount() {
    this.setState({
      unlisten: this.props.history.listen((location) => {
         window.scrollTo(0, 0);
      })
    });
  }

  componentWillUnmount() {
    this.state.unlisten();
  }

  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop);