React作品集Project组件：实现独立可点击项目链接的方法

在React项目的作品集组件中，通过映射渲染4个项目卡片，目前仅能显示项目的网页链接但无法点击。尝试过添加独立<a>标签导致图片重复，设置href属性也无效，需要实现每个项目的独立可点击链接。

原组件代码： #

<div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
  {
  resumeData.portfolio && resumeData.portfolio.map((item) => {
    return(
      <div className="columns portfolio-item">
      <div className="item-wrap">
          <img src={`${item.imgurl}`} alt="" className="item-imgurl"/>
          <div className="overlay">
            <div className="portfolio-item-meta">
              <h5>{item.name}</h5>
              <p>{item.description}</p>
              <h6>{item.url}</h6>
            </div>
          </div>                   
      </div>
    </div>
  )
})
}
</div>

项目数据： #

[
  {
    "name":"Zesty Investy",
    "description":"Investment calculator that helps plan finances for retirement",
    "url":"https://grocha78.github.io/Zesty-Investy-Calculonesty/",
    "imgurl":"/assets/zestyinvesty.png"
  },
  {
    "name":"Art Garage",
    "description":"The place that brings artists and potential buyers together.",
    "url":"https://art-garage-app.herokuapp.com/",
    "imgurl":"src/assets/artgarage.png"
  },
  {
    "name":"Tech Blog",
    "description":"A CMS-style blog site similar to a Wordpress site, where developers can publish their blog posts and comment on other developers’ posts as well.",  
    "url":"https://not-another-tech-blog-78.herokuapp.com/",
    "imgurl":"src/assets/techblog.png"
  },
  {
    "name":"Weather App",
    "description":"Weather app that provides current and future weather forecasts in cities.",
    "url":"https://grocha78.github.io/How-Is-It-Over-There/",
    "imgurl":"src/assets/weatherapp.png"
  }
]

方案1：给整个项目卡片添加可点击链接 #

将整个项目卡片的外层容器（item-wrap）用<a>标签包裹，同时设置安全打开外部链接的属性：

<div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
  {
  resumeData.portfolio && resumeData.portfolio.map((item, index) => {
    return(
      <div className="columns portfolio-item" key={index}>
        <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-wrap">
          <img src={`${item.imgurl}`} alt={item.name} className="item-imgurl"/>
          <div className="overlay">
            <div className="portfolio-item-meta">
              <h5>{item.name}</h5>
              <p>{item.description}</p>
              <h6>{item.url}</h6>
            </div>
          </div>                   
        </a>
      </div>
    )
  })
}
</div>

说明：添加key属性避免React列表渲染警告；补全alt属性提升页面可访问性。

方案2：仅让链接文本可点击 #

如果只需要让显示的URL文本具备点击能力，替换原有的URL展示代码：

<div className="portfolio-item-meta">
  <h5>{item.name}</h5>
  <p>{item.description}</p>
  <h6>
    <a href={item.url} target="_blank" rel="noopener noreferrer">
      {item.url}
    </a>
  </h6>
</div>

方案3：通过点击事件实现跳转 #

不想用<a>标签包裹块级元素时，可通过onClick事件触发页面跳转：

<div id="portfolio-wrapper" className="bgrid-quarters s-bgrid-thirds cf">
  {
  resumeData.portfolio && resumeData.portfolio.map((item, index) => {
    return(
      <div className="columns portfolio-item" key={index}>
        <div 
          className="item-wrap" 
          onClick={() => window.open(item.url, '_blank', 'noopener,noreferrer')}
          style={{ cursor: 'pointer' }}
        >
          <img src={`${item.imgurl}`} alt={item.name} className="item-imgurl"/>
          <div className="overlay">
            <div className="portfolio-item-meta">
              <h5>{item.name}</h5>
              <p>{item.description}</p>
              <h6>{item.url}</h6>
            </div>
          </div>                   
        </div>
      </div>
    )
  })
}
</div>

内容的提问来源于stack exchange，提问作者Guadalupe Rocha