Javascript 数组中的React条件渲染

我正试图找出React中的条件渲染。我从API中得到五个类别，我只想根据类别条件打印一个p标签

我目前的尝试：

this.state.links.map(link => 
    div className="youtubeLinks">                       
        <p> print category 1</p>
        <p> print category 2</p>
        <p> print category 3</p>
        <p> print category 4</p>
        <p> print category 5</p>
    </div>

this.state.links.map（link=>
div className=“youtubeLinks”>
印刷品类别1

印刷品类别2

印刷品类别3

印刷品类别4

印刷品类别5

想要实现

if(link.category == 1){
<p> print category 1</p>
} 
if(link.category == 2){
<p> print category 2</p>
} 
if(link.category == 3){
<p> print category 3</p>
} 
if(link.category == 4){
<p> print category 4</p>
} 
if(link.category == 5){
<p> print category 5</p>
}

if（link.category==1）{
印刷品类别1

} 
如果（link.category==2）{
印刷品类别2

} 
如果（link.category==3）{
印刷品类别3

} 
如果（link.category==4）{
印刷品类别4

} 
如果（link.category==5）{
印刷品类别5

}

您可以这样做

this.state.links.map(link => 
    <div className="youtubeLinks">                       
        {link.category == 1 && <p> print category 1</p>}
        {link.category == 2 && <p> print category 2</p>}
        {link.category == 3 && <p> print category 3</p>}
        {link.category == 4 && <p> print category 4</p>}
        {link.category == 5 && <p> print category 5</p>}
        <img src={link.link} /> // Here is error img
    </div>
)

this.state.links.map（link=>
{link.category==1&&print category 1
}
{link.category==2&&print category 2
}
{link.category==3&&print category 3
}
{link.category==4&&print category 4
}
{link.category==5&&print category 5
}
//这是错误的img
)

如果只想打印p标记内的类别

this.state.links.map(link => 
    <div className="youtubeLinks">                       
        <p> print category {link.category}</p>
    </div>
)

this.state.links.map（link=>
打印类别{link.category}

)

对于带p标签的img

this.state.links.map(link => 
    <div className="youtubeLinks">                       
        {link.category == 1 && (
          <>
            <p> print category 1</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 2 && (
          <>
            <p> print category 2</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 3 && (
          <>
            <p> print category 3</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 4 && (
          <>
            <p> print category 4</p>
            <img src={link.link} />
          </>
        )}
        {link.category == 5 && (
          <>
            <p> print category 5</p>
            <img src={link.link} />
          </>
        )}
    </div>
)

this.state.links.map（link=>
{link.category==1&&(
印刷品类别1

)}
{link.category==2&&(
印刷品类别2

)}
{link.category==3&&(
印刷品类别3

)}
{link.category==4&&(
印刷品类别4

)}
{link.category==5&&(
印刷品类别5

)}
)

您进展顺利，但需要稍作修改

<div className="youtube-links">
 {this.state.links.map(link => (<p>Print category {link.category}</p>))}
</div>

{this.state.links.map（link=>（Print category{link.category}
）}

假设您的数组只包含文本链接

['link1'，'link2'，'link3]'

，您希望将它们映射出来并在该p中显示。映射的链接部分表示数组中的一个项目。我在下面修复了它

//link represents one item. So when you then say return  

链接它将单独打印阵列中的每个项目

 <div className="youtubeLinks">                       
    {this.state.links.map(link => {
        return <p> print category {link}</p>
    })}
 </div>

{this.state.links.map（link=>{
返回打印类别{link}

})}

为什么需要这个？只需使用一个

p

并更改其中的内容，具体取决于我要打印的分类Hello jay{link.category==2&&@WapShivam不完全理解请解释更多在我的链接对象中有一个存储图像src的关键链接。那么我如何呈现它呢image@WapShivam我仍然不明白，但我已经添加了img标签，请检查答案，您不需要检查链接。类别==2