質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.50%
TypeScript

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

React.js

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

Q&A

解決済

1回答

640閲覧

TypeScriptにて、propsで値を受け取り、値がない場合は定型文を表示させてい。

uniuonbiz

総合スコア4

TypeScript

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

React.js

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

0グッド

1クリップ

投稿2023/01/28 12:56

前提

TypeScript学習中に2つの問題に詰まったので質問させていただきました。

実現したいこと

  • 1.propsで値を受け取れないので、値を受け取れるようにしたい。
  • 2.propsに値がない場合はmapを使用した条件分岐で定型文を表示したいが、「JSX コンポーネントとして使用することはできません。その戻り値の型 'void' は、有効な JSX 要素ではありません。」と怒られる。

該当のソースコード

index.tsx import { useTranslation } from 'react-i18next'; import { TEMPLATE } from 'src/Template'; import { Box, Button, Typography } from '@mui/material'; import { ThemeProvider } from '@mui/material/styles'; type MsgProps = { msg: string; }; export const TestMessages = (props: MsgProps) => { const { t } = useTranslation(); const MSG = () => { if (props.msg) { props.msg.split(/(?<=。)/).map((item, index) => { return ( <div key={index}> {item} <br /> </div> ); }); } else { t(TEMPLATE.TEXT.SECOND).split(/(?<=。)/).map((item, index) => { return ( <div key={index}> {item} <br /> </div> ); }); } }; return ( <ThemeProvider> <Box> <Typography><MSG /></Typography> </Box> </ThemeProvider> ); };
MsgProps.tsx import { TestMessages } from './TestMessages'; export const MsgProps = () => { return ( <TestMessages msg={'テキスト01テキスト01'} /> ); };
Template.ts export const TEMPLATE = { TEXT: { SECOND: 'テキスト02テキスト02', }, };

試したこと

MsgProps.tsxをindex.tsxでインポートしたりしてもダメでした。
「JSX コンポーネントとして使用することはできません。その戻り値の型 'void' は、有効な JSX 要素ではありません。」に関しても「MSG」の条件分岐でreturn nullを返すとエラーは出なくなるのですが、値が表示されません。mapは配列を返さないと行けないようなのですが、どう直せば良いか分からず...。

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

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

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

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

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

maisumakun

2023/01/28 13:38

MSGをコンポーネントにする必要はどのあたりにあるのでしょうか?
uniuonbiz

2023/01/29 02:01

他に良い書き方があればそちらでも大丈夫です。 単純に他のパターンが思いつかなかっただけですので
guest

回答1

0

ベストアンサー

他に良い書き方があればそちらでも大丈夫です。

JSXで条件分岐させるときは、3項演算子を使うのが便利です。

jsx

1 return ( 2 <ThemeProvider> 3 <Box> 4 <Typography> 5 { 6 props.msg ? ( 7 props.msg.split(/(?<=。)/).map((item, index) => { 8 return ( 9 <div key={index}> 10 {item} 11 <br /> 12 </div> 13 ); 14 }) 15 ) : ( 16 t(TEMPLATE.TEXT.SECOND).split(/(?<=。)/).map((item, index) => { 17 return ( 18 <div key={index}> 19 {item} 20 <br /> 21 </div> 22 ); 23 }) 24 ) 25 } 26 </Typography> 27 </Box> 28 </ThemeProvider> 29 );

投稿2023/01/29 02:15

maisumakun

総合スコア145121

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

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

maisumakun

2023/01/29 02:15

インデントは目分量で合わせたので、多少ずれているかもしれません。
uniuonbiz

2023/01/29 02:18

有難うございますmm ただ現状propsで値を受け取れず...。 上記の質問でも記載させていただきましたが、何が原因か分からない状況です。
maisumakun

2023/01/29 02:20

> ただ現状propsで値を受け取れず...。 TestMessagesを使う側のコードはどのようなものでしょうか?
uniuonbiz

2023/01/29 05:29

MsgProps.tsxでmsgを設定し、index.tsxの<MSG />コンポーネントで表示させる予定でした。
maisumakun

2023/01/29 05:31

> MsgProps.tsxでmsgを設定し どういう意味でしょうか?
uniuonbiz

2023/01/29 09:15

返信遅くなり申し訳ありません。 他にやり方があれば別の方法でも大丈夫ですが、 msgをpropsにて受け取れる仕様にしたいです。
maisumakun

2023/01/29 10:40 編集

> msgをpropsにて受け取れる仕様にしたいです。 それとMsgPropsがどう関係するのですか? (このコードを「どのように使うか」が見えない状況が続いています)
uniuonbiz

2023/01/29 13:12

デフォルトはTemplate.tsのテキストを表示させますが、MsgProps.tsxにmsgが設定されている場合はそちらのテキストをpropsにて受け取り、表示させたいです。 ただ現状のコードだとpropsでテキストを受け取れないので質問をしています。 MsgPropsがどう関係するかは問題ではなく、設定したテキストをpropsで受け取り、ご提示いてだいた3項演算子にて参照できるようにしたいです。
uniuonbiz

2023/01/29 13:15

それともそもそもMsgPropsが必要ないという意図での質問でしょうか? コード自体は僕が分からないなりに書いたものですので、必要なければ消して違う書き方を試してみます
maisumakun

2023/01/29 13:26 編集

> ただ現状のコードだとpropsでテキストを受け取れないので質問をしています。 渡す側のコードはどのようなものですか? (TestMessagesやMsgPropsを「呼ぶ側」のコードがないので、「呼び方が間違っている」場合には解決不能です)
uniuonbiz

2023/01/30 00:49

index.tsxが受け取る側でMsgPropsが渡す側です。 根本的に間違っているのでしょうか?
maisumakun

2023/01/30 01:56 編集

> index.tsxが受け取る側でMsgPropsが渡す側です。 いろいろ誤解がありそうです。 最初から聞き続けているのですが、実際にこれらのJSXをHTML(など最終的な出力先)へ出力するコード、あるいはこれらのコンポーネントを呼び出す上位コンポーネントはどこなのでしょうか?そちら側の呼び方、書き方がおかしいのではないかと疑問を抱いている状況です。
uniuonbiz

2023/01/30 02:19

上位コンポーネントはApp.tsxになります。 そこでルーティングの設定を行なっており、今回のindex.tsxを呼び出しております。 App.tsx import { PageNotFound } from './pages/page-not-found/index.tsx'; import { BrowserRouter, Route, Router, Switch, matchPath } from 'react-router-dom'; const RoutingPages = () => { return ( <BrowserRouter> <Router history={history}> <Switch> <Route path="*" component={PageNotFound} /> </Switch> </Router> </BrowserRouter> ); };
maisumakun

2023/01/30 02:24

PageNotFoundはTestMessagesとMsgPropsのどちらなのですか? (名前が違うので質問文のコードとすんなりつながらないです)
uniuonbiz

2023/01/30 02:39

すみません。 TestMessagesになります。
maisumakun

2023/01/30 02:49

となると、<MsgProps>は呼ばれていないのでコードになんの影響も及ぼしません(index.tsxでのMsgPropsは同じファイル内で定義されているものであり無関係です)。
uniuonbiz

2023/01/30 03:06

App.tsx側で文言を定義する必要があるという事でしょうか?
maisumakun

2023/01/30 03:36 編集

それこそ、App.jsからTestMessagesでなくMsgPropsを呼ぶ、という手段があります。
uniuonbiz

2023/01/30 03:58

有難うございます。 App.jsの<Route path="*" component={PageNotFound} />にmsg={'テキスト01テキスト01'}を定義する場合、どういった書き方になるのでしょうか?
maisumakun

2023/01/30 04:09

> App.jsの<Route path="*" component={PageNotFound} />にmsg={'テキスト01テキスト01'}を定義する場合、どういった書き方になるのでしょうか? 直接定義するより、それこそMsgPropsのような値をセットしたコンポーネントを呼ぶほうが手っ取り早いです。
uniuonbiz

2023/01/30 04:21

承知しました。 ご回答いただき有難うございましたmm
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問