下記コードのように時刻によって表示される挨拶を変更するのが目的です。
ですが、エラーはないのに上手く表示されません。(exportが上手くいっていない??)
初学者のためどなたかアドバイス頂ければと思います。
宜しくお願い致します。
[component化したつもり↓]
Typescript
1import React from 'react'; 2 3const hour = new Date().getHours(); 4 5const GreetInTheMorning = () => { 6 return <h1>おはようございます。</h1> 7} 8const GreetInTheAfternoon = () => { 9 return <h1>こんにちは。</h1> 10} 11const GreetInTheEvening = () => { 12 return <h1>こんばんは。</h1> 13} 14 15const Greeting = () => { 16 // 5時 ~ 12時までは"おはようございます。"を表示する 17 if(5 <= hour && hour < 12) { 18 return <GreetInTheMorning /> 19 } 20 // 12時 ~ 18時までは"こんにちは。"を表示する 21 else if(12 <= hour && hour < 18) { 22 return <GreetInTheAfternoon /> 23 } 24 // 18時 ~ 5時までは"こんばんは。"を表示する 25 else if((18 <= hour && hour < 24) || (0 <= hour && hour < 5) ) { 26 return <GreetInTheEvening /> 27 } 28} 29 30export default Greeting;
[表示先]
typescript
1import Image from 'next/image'; 2import Link from '@components/ui/link'; 3import cn from 'classnames'; 4import { siteSettings } from '@settings/site-settings'; 5import Greeting from '@components/greeting'; 6 7const Logo: React.FC<React.AnchorHTMLAttributes<{}>> = ({ 8 className, 9 href = siteSettings.logo.href, 10 ...props 11}) => { 12 return ( 13 <Link 14 href={href} 15 className={cn('inline-flex focus:outline-none', className)} 16 {...props} 17 > 18 <div> 19 <span className="block pb-2 ml-2 whitespace-no-wrap overflow-x-auto">{Greeting}へのへのもへじ様</span> 20 <div className="flex items-center w-[200px]"> 21 22 </div> 23 </div> 24 </Link> 25 ); 26}; 27 28export default Logo;

回答1件
あなたの回答
tips
プレビュー