单击 ReactJS 的图像打开新选项卡

Question

我正在尝试在新选项卡上打开一个新的 link（在本例中，我刚刚添加了一个虚拟 link : facebook.com）悬停图像 class。但是我在做这件事时遇到了一些麻烦。下面是我的代码片段，非常感谢您的帮助。

<div className="container">
  {data.map((d)=>(
    <div className="item">
      <img className="background-img" src={d.img} ></img>
      <h3>{d.title}</h3>
      <img 
        className="hover-img" 
        href="www.facebook.com" 
        src="asset/eye.png"
      />
    </div>
  ))}
</div>

Answer 1

除了设置 href 属性，您还可以打开一个新的 window，点击 window.open()。

<div className="container">
{data.map((d)=>(
     <div className="item">
       <img className="background-img" src={d.img} ></img>
       <h3>{d.title}</h3>
       <img 
         className="hover-img" 
         src="asset/eye.png" 
         alt="eye" 
         onClick={()=> window.open("https://www.facebook.com", "_blank")} 
       />
     </div>
    ))}
</div>