Reactアプリに、API呼び出しを行い、電話番号と電子メールの2つの連絡方法を特徴とする応答を返し、それぞれのアイコンの横に表示する機能コンポーネントがあります。
一部の回答には、どちらか一方の連絡方法しかない場合と、どちらもない場合があります。
応答に連絡方法がリストされていない場合でも、アイコンを表示して、データがある場所に「-」を配置します。
これが、いくつかの簡単な3項メソッドを書き出そうとしたロジックの最初のパスですが、現在、各行にレンダリングされるのは [object Object][object Object]
let renderContactDetails = methods.map(method => {
return (
<div>
{
method.contactMethodType === "M" ? `${<span><PhoneSvg /> {method.number}</span>}` : `${<span><PhoneSvg /> -- </span>}`
}
{
method.contactMethodType === "E" ? `${<span><AtSymbolSvg /> {method.emailAddress}</span>}` : `${<span><AtSymbolSvg /> -- </span>}`
}
</div>
);
});
助言がありますか？
テンプレートリテラル内でJavaScriptを定義し、JSXに次のようにhtmlタグを変換させるだけです。
let renderContactDetails = methods.map(method => {
const number = method.contactMethodType === "M" ? `${method.number}` : `--`;
const email = method.contactMethodType === "E" ? `${method.emailAddress}` : `--`;
return (
<div>
<span><PhoneSvg /> {number}</span>
<span><PhoneSvg /> {email}</span>
</div>
);
});この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加