回答編集履歴
1
追記を受けて修正
test
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
1
|
-
おそらくこんな感じのはずです。
|
|
2
|
-
|
|
3
1
|
共通化できる繰り返しの要素は`map`を使ってレンダリングします。
|
|
4
2
|
|
|
5
3
|
|
|
6
4
|
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
**※追記を受けて`WeatherForecast.jsx`を更にコンポーネント分割**
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
7
|
-
`Weather
|
|
13
|
+
`WeatherIcon.jsx`
|
|
8
14
|
|
|
9
15
|
```JSX
|
|
10
16
|
|
|
17
|
+
export const WeatherIcon = ({ src }) => (<img src={src} alt="" />)
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
`WeatherData.jsx`
|
|
24
|
+
|
|
25
|
+
```JSX
|
|
26
|
+
|
|
11
|
-
export const Weather
|
|
27
|
+
export const WeatherData = ({ conditions, time }) => {
|
|
12
28
|
|
|
13
29
|
return (
|
|
14
30
|
|
|
15
|
-
<
|
|
31
|
+
<>
|
|
16
|
-
|
|
17
|
-
<img src={src} alt="" />
|
|
18
32
|
|
|
19
33
|
<p>
|
|
20
34
|
|
|
@@ -27,6 +41,38 @@
|
|
|
27
41
|
<span>time:</span> {time}
|
|
28
42
|
|
|
29
43
|
</p>
|
|
44
|
+
|
|
45
|
+
</>
|
|
46
|
+
|
|
47
|
+
)
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
`WeatherForecast.jsx`
|
|
56
|
+
|
|
57
|
+
```JSX
|
|
58
|
+
|
|
59
|
+
// 任意のディレクトリ
|
|
60
|
+
|
|
61
|
+
import { WeatherIcon } from "./WeatherIcon"
|
|
62
|
+
|
|
63
|
+
import { WeatherData } from "./WeatherData"
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
export const WeatherForecast = ({ src, conditions, time }) => {
|
|
68
|
+
|
|
69
|
+
return (
|
|
70
|
+
|
|
71
|
+
<div className="weather">
|
|
72
|
+
|
|
73
|
+
<WeatherIcon src={src} />
|
|
74
|
+
|
|
75
|
+
<WeatherData conditions={conditions} time={time} />
|
|
30
76
|
|
|
31
77
|
</div>
|
|
32
78
|
|
|
@@ -45,6 +91,8 @@
|
|
|
45
91
|
// 任意のディレクトリ
|
|
46
92
|
|
|
47
93
|
import { WeatherForecast } from './WeatherForecast'
|
|
94
|
+
|
|
95
|
+
|
|
48
96
|
|
|
49
97
|
// レンダリングする情報を持った配列を用意
|
|
50
98
|
|