如何在映射中使用if- react返回react
如何在映射中使用if- react返回react
提问于 2022-01-26 10:29:32
代码：-
{comments.map((comment) => {
//Display Hex to base64 image format
const base64 = Buffer.from(comment.Thumbnail, 'hex').toString('base64');
//console.log(base64);
return (
<tr key={comment.SlugName} ref={tbodyRef} tabIndex={0} className="border_bottom" onKeyDown={(e) => handleKeyDown(e, comment.idx)}>
<td style={{ color: "white", width: "200px" }}>
<img src={`data:image/jpeg;base64,${base64}`} alt="Clip Thumbnail" width="100%" />
</td>
<td style={{ color: "white", width: "440px" }}>{comment.ClipName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.SlugName}</td>
<td style={{ color: "white", width: "250px" }}>{comment.ChannelName}</td>
<td style={{ color: "white", width: "140px" }}>
{
if (comment.Status === 1) {
<button type="submit">Play</button>
} else if(comment.Status === 2){
console.log(comment.Status);
} else if(comment.Status === 3){
console.log(comment.Status);
} else{
console.log(comment.Status);
}
}
</td>
<td style={{ color: "white" }}>
{comment.Mode === true ? <RiArrowLeftRightFill style={{ color: "white" }} /> : <RiArrowLeftRightFill style={{ color: "#363c44" }} />}
</td>
<td style={{ color: "white" }}>{comment.StartTime}</td>
<td style={{ color: "white" }}>{comment.Duration}</td>
</tr>
)
}我想在评论的时候。状态为1，它在网页中显示一个按钮作为评论。Status 2还显示了一个按钮，显示名称提示，就像注释一样。状态3,4如何显示注释状态为1,2,3的btn
空气污染指数：-
[
{
"ClipName": "Evernote Hacked, Time t_STRA005R",
"Status": 1,
"ChannelName": "News Hindi",
"Mode": false,
"StartTime": "00:00:00:00",
"Duration": "00:00:06:11",
"idx": 0,
"Thumbnail": "9e728a2800a28a2800a28a2800add3d6b0aa7fb6dc7fcf4ffc745006b8a5158ff6db145145001451450014514500145145001451450014514500145145001451450014514500145145007fffd9",
"SlugName": "EU 'growth boost from US trade deal'"
},
{
"ClipName": "U.S. releases $250 mill_STRA005S",
"Status": 2,
"ChannelName": "News Hindi",
"Mode": false,
"StartTime": "00:00:00:00",
"Duration": "00:00:32:16",
"idx": 1,
"Thumbnail": "9e728a2800a28a2800a28a2800add3d6b0aa7fb6dc7fcf4ffc745006b8a5158ff6db145145001451450014514500145145001451450014514500145145001451450014514500145145007fffd9",
"SlugName": "Liverpool FC continues to make losses"
},
{
"ClipName": "SpaceX-2 Mission Launch_STRA005T",
"Status": 3,
"ChannelName": "News Hindi",
"Mode": false,
"StartTime": "00:00:00:00",
"Duration": "00:04:20:04",
"idx": 2,
"Thumbnail": "9e728a2800a28a2800a28a2800add3d6b0aa7fb6dc7fcf4ffc745006b8a5158ff6db145145001451450014514500145145001451450014514500145145001451450014514500145145007fffd9",
"SlugName": "Latvia applies to enter eurozone"
}
]我想在评论的时候。状态为1，它在网页中显示一个按钮作为评论。Status 2还显示了一个按钮，显示名称提示，就像注释一样。状态3,4如何显示注释状态为1,2,3的btn
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-26 11:10:28
您可以创建一个使用switch语句并返回输出的函数：
<div>
{data.map(({ status }) => {
const statusContent = () => {
if (status === 1) {
return <button>Option 1</button>;
} else if (status === 2) {
return <button>Option 2</button>;
} else if (status === 3) {
return <button>Option 3</button>;
} else {
return <button>Option 4</button>;
}
};
return <div>{statusContent()}</div>;
})}
</div>理想情况下，在JSX中，它对三元操作符来说是“更干净的”。但在这种情况下，有多种条件，这将是很好的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70861994
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号