teratail header banner
teratail header banner
質問するログイン新規登録
TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

679閲覧

Typescript react import 出来ない??

ekTJ

総合スコア109

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2022/05/30 06:44

0

0

下記コードのように時刻によって表示される挨拶を変更するのが目的です。
ですが、エラーはないのに上手く表示されません。(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;

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2022/05/30 06:52

> 上手く表示されません。 何が表示されて、どこまでが表示されない状況でしょうか。
ekTJ

2022/05/30 06:57

へのへのもへじ様まで表示される状態です。
ekTJ

2022/05/30 07:04

maisumakun様 表示はされたのですが、次は下記が。。。 (alias) const Greeting: () => JSX.Element | undefined import Greeting 'Greeting' を JSX コンポーネントとして使用することはできません。 その戻り値の型 'Element | undefined' は、有効な JSX 要素ではありません。 型 'undefined' を型 'Element | null' に割り当てることはできません。
maisumakun

2022/05/30 07:10

エラーメッセージのとおりです。関数コンポーネントがundefinedを返してはいけません。
guest

回答1

0

ベストアンサー

jsx

1<span className="中略">{Greeting}へのへのもへじ様</span>

コンポーネントを表示する場合は<Greeting />とタグ形式で書く必要があります。

投稿2022/05/30 07:00

maisumakun

総合スコア146676

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ekTJ

2022/05/30 07:11

maisumakun様 表示はされたのですが、次は下記が。。。 (alias) const Greeting: () => JSX.Element | undefined import Greeting 'Greeting' を JSX コンポーネントとして使用することはできません。 その戻り値の型 'Element | undefined' は、有効な JSX 要素ではありません。 型 'undefined' を型 'Element | null' に割り当てることはできません。
maisumakun

2022/05/30 07:38

エラーメッセージのとおりです。関数コンポーネントがundefinedを返してはいけません(TypeScriptコンパイラは、hourが0~23のいずれかであるということは判断できません)。
ekTJ

2022/05/30 07:48

調べてみたのですが??? [Greetingで時刻によって出力させる文章を変更]→[それを表示先に渡す]→[画面に表示] 未定義のエラーということは定義すれば良い?ということですか
maisumakun

2022/05/30 07:51

> 未定義のエラーということは定義すれば良い?ということですか 違います。Greetingの関数で、どのifにも当てはまらなかった場合を考えないといけません(人間にはないと判別できますが、TypeScriptコンパイラは把握できません)。
ekTJ

2022/05/30 07:56

maisumakun様 仰る通りelseを設定したら、エラーが無くなりました!!!ありがとうございます! maisumakun様の過去の回答など拝見させて頂き理解を深めたいと思います。 また、お時間ありましたらご相談させて下さい。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問