componentDidUpdateを使ったscrollのポジションの変更

Question

こちらのサイトを参考にして、他ページに遷移した時に、スクロールの位置がトップになるためのコードを追加しました。RouterコンポーネントをこのScrollToTop コンポーネントで囲んで挙動自体はうまく言っているのですが、コードの意味がわからない状態です。。

componentDidUpdateはアップデートされるたびに呼ばれると書かれているのですが、主語がなくよくわかりません。。また、prevPropsの説明もなく、どう動いているのかよくわからない状態です。

どなたかわかりますでしょうか？よろしくお願いします...!

import React, { Component } from 'react';
import { withRouter } from 'react-router';

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

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

export default withRouter(ScrollToTop)

Answer 1

componentDidUpdateはアップデートされるたびに呼ばれると書かれているのですが、主語がなくよくわかりません。。

主語はcomponent did updateとある通り、componentが主語です。この場合は、「component イコール ScrollToTopコンポーネント」です。

prevPropsの説明もなく、どう動いているのかよくわからない状態です。

prevPropsのprevはpreviousの略です。

current（現在）に対してのprevious（以前、一つ前）です。

componentがupdateした訳ですから、componentがupdate前とupdate後で、update前のprops、つまり、previous propsと、update後のprops、つまり、current props(this.props)が存在するという訳です。

if (this.props.location !== prevProps.location) {

ここでは、コンポーネントがアップデートされる前とされた後のpropsのlocationを比較して、locationの値が変わっていたならば、0, 0の座標にウィンドウスクロールさせています。

if (this.props.location !== prevProps.location) {

また、locationはどこから渡ってきているのかというと、これは、withRouter(ScrollToTop)の部分です。

withRouterの説明

You can get access to the history object's properties and the closest <Route>'s match via the withRouter higher-order component. withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

上の最後の行↓

withRouter will pass updated match, location, and history props to the wrapped component whenever it renders.

the wrapped componentが今回の場合は、ScrollToTopコンポーネントのことです。

withRouter(ScrollToTop)により、ScrollToTopコンポーネントのpropsにlocationオブジェクトが渡ってきています。

Comments

[rina_teratail]

遅れてごめんなさい！すごくわかりやすかったです...! ありがとうございます(*ﾟ▽ﾟ)