【React入門】コンポーネントの条件付きRender (Conditional Rendering)

13636 ワード
Web React HTML フロントエンド JavaScript HTML テキストリンク

はじめに

Reactの公式ドキュメントの条件付きレンダー(Conditional Rendering)にトライ。

条件付きレンダー-React
https://ja.reactjs.org/docs/conditional-rendering.html

開発環境

  • Ubuntu18.04
  • yarn 1.17.3
  • create-react-app 3.1.2

create-react-appで準備

$ create-react-app try-conditional-rendering
$ cd try-conditional-rendering

で、./public/index.htmlと./src/App.jsを編集。

./public/index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>Try Conditional Rendering</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
./src/App.js
import React from 'react';
import './App.css';

const App = () => {

}

export default App;

早速条件付きレンダーをやってみる。

まずは丸パクリにならないよう公式ドキュメントのマネをしてGreetInTheMorningとGreetInTheAfternoon、そしてGreetInTheEveningというコンポーネントを作る。

./src/App.js
const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}

const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}

const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

現在時刻によって上3つのコンポーネントのいずれかを表示したいとする。
本来ならちゃんとDateオブジェクトを使って...ってやるんだけど、今回は公式に沿ってGreetingコンポーネントを作ってAppコンポーネントからGreetingコンポーネントにnowHourという引数を渡してズルをする。

./src/App.js
const Greeting = (props) => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= props.nowHour && props.nowHour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= props.nowHour && props.nowHour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= props.nowHour && props.nowHour < 24)  || (0 <= props.nowHour && props.nowHour < 5) ) {
    return <GreetInTheEvening />
  }
  else {
    return <h1>Error.</h1>
  }
}

./src/App.jsの完成形が下のコード。

./public/App.js
import React from 'react';
import './App.css';

const GreetInTheMorning = () => {
  return <h1>おはようございます。</h1>
}

const GreetInTheAfternoon = () => {
  return <h1>こんにちは。</h1>
}

const GreetInTheEvening = () => {
  return <h1>こんばんは。</h1>
}

const Greeting = (props) => {
  // 5時 ~ 12時までは"おはようございます。"を表示する
  if(5 <= props.nowHour && props.nowHour < 12) {
    return <GreetInTheMorning />
  }
  // 12時 ~ 18時までは"こんにちは。"を表示する
  else if(12 <= props.nowHour && props.nowHour < 18) {
    return <GreetInTheAfternoon />
  }
  // 18時 ~ 5時までは"こんばんは。"を表示する
  else if((18 <= props.nowHour && props.nowHour < 24)  || (0 <= props.nowHour && props.nowHour < 5) ) {
    return <GreetInTheEvening />
  }
  else {
    return <h1>Error.</h1>
  }
} 

// nowHour={}の中の数字を変えれば画面に表示される挨拶が変わる。
const App = () => {
  return <Greeting nowHour={13} />;
}

export default App;

おわりに

続きはまた書きます。

C++におけるprotectedアクセス権の問題
Python学習--装飾器