回答編集履歴
4
2
test
CHANGED
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
componentがupdateした訳ですから、componentがupdate前とupdate後で、
|
|
21
|
+
componentがupdateした訳ですから、componentがupdate前とupdate後で、update前のprops、つまり、previous propsと、update後のprops、つまり、current props(this.props)が存在するという訳です。
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
3
あ
test
CHANGED
|
@@ -56,8 +56,12 @@
|
|
|
56
56
|
|
|
57
57
|
|
|
58
58
|
|
|
59
|
-
> withRouter will pass updated match, **location**, and history props **to the wrapped component** whenever it renders.
|
|
59
|
+
> withRouter will pass updated match, **location**, and history props **to the wrapped component** whenever it renders.
|
|
60
60
|
|
|
61
61
|
|
|
62
62
|
|
|
63
63
|
`the wrapped component`が今回の場合は、`ScrollToTop`コンポーネントのことです。
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
`withRouter(ScrollToTop)`により、ScrollToTopコンポーネントのpropsにlocationオブジェクトが渡ってきています。
|
2
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.
test
CHANGED
|
@@ -31,3 +31,33 @@
|
|
|
31
31
|
|
|
32
32
|
|
|
33
33
|
ここでは、コンポーネントがアップデートされる前とされた後のpropsのlocationを比較して、locationの値が変わっていたならば、`0, 0`の座標にウィンドウスクロールさせています。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
if (this.props.location !== prevProps.location) {
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
また、`location`はどこから渡ってきているのかというと、これは、`withRouter(ScrollToTop)`の部分です。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
[withRouterの説明](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md)
|
|
50
|
+
|
|
51
|
+
> 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.**
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
上の最後の行↓
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
> withRouter will pass updated match, **location**, and history props **to the wrapped component** whenever it renders.**
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
`the wrapped component`が今回の場合は、`ScrollToTop`コンポーネントのことです。
|
1
5
test
CHANGED
|
@@ -18,4 +18,16 @@
|
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
componentがupdateした訳ですから、componentがupdate前とupdate後で、もし、propsに変更があったのであれば、update前のprops、つまり、previous propsと、update後のprops、つまり、current propsがあるという訳です。
|
|
21
|
+
componentがupdateした訳ですから、componentがupdate前とupdate後で、もし、propsに変更があったのであれば、update前のprops、つまり、previous propsと、update後のprops、つまり、current props(this.props)があるという訳です。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
if (this.props.location !== prevProps.location) {
|
|
28
|
+
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
ここでは、コンポーネントがアップデートされる前とされた後のpropsのlocationを比較して、locationの値が変わっていたならば、`0, 0`の座標にウィンドウスクロールさせています。
|