はじめに
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;
おわりに
続きはまた書きます。