回答編集履歴
1
追記を受けて修正
answer
CHANGED
|
@@ -1,18 +1,41 @@
|
|
|
1
|
-
おそらくこんな感じのはずです。
|
|
2
1
|
共通化できる繰り返しの要素は`map`を使ってレンダリングします。
|
|
3
2
|
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
**※追記を受けて`WeatherForecast.jsx`を更にコンポーネント分割**
|
|
6
|
+
|
|
4
|
-
`
|
|
7
|
+
`WeatherIcon.jsx`
|
|
5
8
|
```JSX
|
|
9
|
+
export const WeatherIcon = ({ src }) => (<img src={src} alt="" />)
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
`WeatherData.jsx`
|
|
13
|
+
```JSX
|
|
6
|
-
export const
|
|
14
|
+
export const WeatherData = ({ conditions, time }) => {
|
|
7
15
|
return (
|
|
8
|
-
<
|
|
16
|
+
<>
|
|
9
|
-
<img src={src} alt="" />
|
|
10
17
|
<p>
|
|
11
18
|
<span>conditions:</span> {conditions}
|
|
12
19
|
</p>
|
|
13
20
|
<p>
|
|
14
21
|
<span>time:</span> {time}
|
|
15
22
|
</p>
|
|
23
|
+
</>
|
|
24
|
+
)
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
`WeatherForecast.jsx`
|
|
29
|
+
```JSX
|
|
30
|
+
// 任意のディレクトリ
|
|
31
|
+
import { WeatherIcon } from "./WeatherIcon"
|
|
32
|
+
import { WeatherData } from "./WeatherData"
|
|
33
|
+
|
|
34
|
+
export const WeatherForecast = ({ src, conditions, time }) => {
|
|
35
|
+
return (
|
|
36
|
+
<div className="weather">
|
|
37
|
+
<WeatherIcon src={src} />
|
|
38
|
+
<WeatherData conditions={conditions} time={time} />
|
|
16
39
|
</div>
|
|
17
40
|
)
|
|
18
41
|
}
|
|
@@ -22,6 +45,7 @@
|
|
|
22
45
|
```JSX
|
|
23
46
|
// 任意のディレクトリ
|
|
24
47
|
import { WeatherForecast } from './WeatherForecast'
|
|
48
|
+
|
|
25
49
|
// レンダリングする情報を持った配列を用意
|
|
26
50
|
const weatherInfo = [
|
|
27
51
|
{
|