React コンポーネントを作成する

React、その他諸々学習中の初心者です。

初歩的な質問ですみません。Reactわかる方に見て頂けたら幸いです。

１)HTMLの構造を見て、天気アイコンを作成するためのコンポーネントを作成する.
2)propsを受け入れるようにコンポーネントを設定し、それらのpropsで動作するようにJSXを更新してください.

とあり、自分の解釈/書き方が間違っている場合ご指摘いただけますと助かります。

↓ 自分で書いたコンポーネントフォルダ内のjsファイル

JavaScript
1import React from "react";
2
3const WeatherForecast = (props) => {
4  return <img src={props.img} className="weather" alt="..." />;
5};
6
7export default WeatherForecast;
8

↓ 用意されているHTML

HTML
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7	<meta name="theme-color" content="#000000">
8	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
9	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
10	<title>React App</title>
11</head>
12
13<body>
14	<noscript>
15		You need to enable JavaScript to run this app.
16	</noscript>
17	<div id="root"></div>
18  <section>
19
20    <div class="weather">
21      <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/day.svg" alt="">
22      <p><span>conditions:</span> sunny</p>
23      <p><span>time:</span> day</p>
24    </div>
25
26    <div class="weather">
27      <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg" alt="">
28      <p><span>conditions:</span> clear</p>
29      <p><span>time:</span> day</p>
30    </div>
31    
32    <div class="weather">
33      <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/stormy.svg" alt="">
34      <p><span>conditions:</span> clear</p>
35      <p><span>time:</span> day</p>
36    </div>
37
38    <div class="weather">
39      <img src="http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-day_t7ckxp.svg" alt="">
40      <p><span>conditions:</span> partly sunny</p>
41      <p><span>time:</span> night</p>
42    </div>
43    
44    <div class="weather">
45      <img src='http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-night.svg' alt="" />
46      <p><span>conditions:</span> clear</p>
47      <p><span>time:</span> day</p>
48    </div>
49  </section>
50</body>
51
52</html>

行動規範の内容に同意します

回答1件

ベストアンサー

共通化できる繰り返しの要素はmapを使ってレンダリングします。

※追記を受けてWeatherForecast.jsxを更にコンポーネント分割

WeatherIcon.jsx

JSX
1export const WeatherIcon = ({ src }) => (<img src={src} alt="" />)

WeatherData.jsx

JSX
1export const WeatherData = ({ conditions, time }) => {
2  return (
3    <>
4      <p>
5        <span>conditions:</span> {conditions}
6      </p>
7      <p>
8        <span>time:</span> {time}
9      </p>
10    </>
11  )
12}

WeatherForecast.jsx

JSX
1// 任意のディレクトリ
2import { WeatherIcon } from "./WeatherIcon"
3import { WeatherData } from "./WeatherData"
4
5export const WeatherForecast = ({ src, conditions, time }) => {
6  return (
7    <div className="weather">
8      <WeatherIcon src={src} />
9      <WeatherData conditions={conditions} time={time} />
10    </div>
11  )
12}

App.jsx

JSX
1// 任意のディレクトリ
2import { WeatherForecast } from './WeatherForecast'
3
4// レンダリングする情報を持った配列を用意
5const weatherInfo = [
6  {
7    src: 'http://res.cloudinary.com/jkeohan/image/upload/v1535732381/day.svg',
8    conditions: 'sunny',
9    time: 'day'
10  },
11  {
12    src: 'http://res.cloudinary.com/jkeohan/image/upload/v1535732381/night.svg',
13    conditions: 'clear',
14    time: 'day'
15  },
16  {
17    src: 'http://res.cloudinary.com/jkeohan/image/upload/v1535732381/stormy.svg',
18    conditions: 'clear',
19    time: 'day'
20  },
21  {
22    src: 'http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-day_t7ckxp.svg',
23    conditions: 'partly sunny',
24    time: 'night'
25  },
26  {
27    src: 'http://res.cloudinary.com/jkeohan/image/upload/v1535732381/cloudy-night.svg',
28    conditions: 'clear',
29    time: 'day'
30  }
31]
32
33export default function App() {
34  return (
35    <div className="App">
36      {weatherInfo.map((info, index) => (<WeatherForecast key={index} {...info} />))}
37    </div>
38  )
39}

投稿2021/07/25 17:08

編集2021/07/25 17:24

taku-hu

総合スコア176

hiro_ike

2021/07/26 15:11

ありがとうございます。大変助かりました。ちなみに、上記にpropsを使いたい場合、どの部分を書き換える必要ありますでしょうか？

taku-hu

2021/07/26 16:13 編集

全てpropsを使用しています。受け取る時に展開しているだけなので、そのまま使いたいなら、 export const WeatherForecast = (props) => { 　return ( 　　<div className="weather"> 　　　<WeatherIcon src={props.src} /> 　　　<WeatherData conditions={props.conditions} time={props.time} /> 　　</div> 　) } のように関数コンポーネントの引数部分をpropsにして、props.****で値を使用すればよいと思います。

行動規範の内容に同意します