Q&A
MSGをコンポーネントにする必要はどのあたりにあるのでしょうか？
前提
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は配列を返さないと行けないようなのですが、どう直せば良いか分からず...。
他に良い書き方があればそちらでも大丈夫です。
単純に他のパターンが思いつかなかっただけですので
回答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
総合スコア142279
回答へのコメント
インデントは目分量で合わせたので、多少ずれているかもしれません。
有難うございますmm
ただ現状propsで値を受け取れず...。
上記の質問でも記載させていただきましたが、何が原因か分からない状況です。
> ただ現状propsで値を受け取れず...。
TestMessagesを使う側のコードはどのようなものでしょうか？
MsgProps.tsxでmsgを設定し、index.tsxの<MSG />コンポーネントで表示させる予定でした。
> MsgProps.tsxでmsgを設定し
どういう意味でしょうか？
返信遅くなり申し訳ありません。
他にやり方があれば別の方法でも大丈夫ですが、
msgをpropsにて受け取れる仕様にしたいです。
> msgをpropsにて受け取れる仕様にしたいです。
それとMsgPropsがどう関係するのですか？
（このコードを「どのように使うか」が見えない状況が続いています）
デフォルトはTemplate.tsのテキストを表示させますが、MsgProps.tsxにmsgが設定されている場合はそちらのテキストをpropsにて受け取り、表示させたいです。
ただ現状のコードだとpropsでテキストを受け取れないので質問をしています。
MsgPropsがどう関係するかは問題ではなく、設定したテキストをpropsで受け取り、ご提示いてだいた3項演算子にて参照できるようにしたいです。
それともそもそもMsgPropsが必要ないという意図での質問でしょうか？
コード自体は僕が分からないなりに書いたものですので、必要なければ消して違う書き方を試してみます
> ただ現状のコードだとpropsでテキストを受け取れないので質問をしています。
渡す側のコードはどのようなものですか？
（TestMessagesやMsgPropsを「呼ぶ側」のコードがないので、「呼び方が間違っている」場合には解決不能です）
index.tsxが受け取る側でMsgPropsが渡す側です。
根本的に間違っているのでしょうか？
> index.tsxが受け取る側でMsgPropsが渡す側です。
いろいろ誤解がありそうです。
最初から聞き続けているのですが、実際にこれらのJSXをHTML（など最終的な出力先）へ出力するコード、あるいはこれらのコンポーネントを呼び出す上位コンポーネントはどこなのでしょうか？そちら側の呼び方、書き方がおかしいのではないかと疑問を抱いている状況です。
上位コンポーネントは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>
);
};
PageNotFoundはTestMessagesとMsgPropsのどちらなのですか？
（名前が違うので質問文のコードとすんなりつながらないです）
すみません。
TestMessagesになります。
となると、<MsgProps>は呼ばれていないのでコードになんの影響も及ぼしません（index.tsxでのMsgPropsは同じファイル内で定義されているものであり無関係です）。
App.tsx側で文言を定義する必要があるという事でしょうか？
それこそ、App.jsからTestMessagesでなくMsgPropsを呼ぶ、という手段があります。
有難うございます。
App.jsの<Route path="*" component={PageNotFound} />にmsg={'テキスト01テキスト01'}を定義する場合、どういった書き方になるのでしょうか？
> App.jsの<Route path="*" component={PageNotFound} />にmsg={'テキスト01テキスト01'}を定義する場合、どういった書き方になるのでしょうか？
直接定義するより、それこそMsgPropsのような値をセットしたコンポーネントを呼ぶほうが手っ取り早いです。
承知しました。
ご回答いただき有難うございましたmm
