在 Array 中反应条件渲染答案

【问题标题】：React conditional rendering in Array在 Array 中反应条件渲染
【发布时间】：2020-02-26 10:53:33
【问题描述】：

我正在尝试找出 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>

想要实现

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>
}

【问题讨论】：

为什么需要这个？只需使用一个p 并更改里面的内容，取决于类别

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

你可以这样做

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>
)

如果你只想在 p 标签内打印类别

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

对于带有 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>
)

【讨论】：

你好，我想打印 {link.category == 2 &&
@WapShivam 不明白请多解释
在我的链接对象中有一个存储图像src的关键链接。那么我如何渲染该图像
@WapShivam 我还是不明白，但我已经添加了 img 标签请检查你不需要检查的答案 link.category == 2

【解决方案2】：

你做得很好，但需要一点修改

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

【讨论】：

【解决方案3】：

假设您的数组仅包含文本链接['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>

【讨论】：