如何在React类容器中插入超链接

Question

提前感谢您阅读此问题。

我想做的是：在底部插入一个指向该容器项目类的URL超链接。

到目前为止，我使用map来调用我从另一个文件输入的数据。在这种情况下，我很难找到一些实现超链接的例子。

或者我可以说——不知道在这种情况下我应该如何开始让src或href工作。

这是我所期望的，但没有工作

<div className="container">
{data.map(db => (
<div className="item">
<img 
src={db.img}
alt=""
href="https://localhost:3000/" {/* here */}
/>
<h3>{db.title}</h3>
</div>
))}
</div>

我知道这显然是行不通的！-但我真的不知道我是否可以尝试在这个"项目类"中制作一些超链接功能，或者我应该从我调用这些数据的文件(img，title(中处理它。

在英语中，我想让img(可点击(重定向到我设置的URL页面。

如果我能得到一些提示，我将不胜感激。。。

请注意：下面是整个代码。

{/* Portfolio.jsx */}
import { useState, useEffect } from "react";
import PortfolioList from "../PortfolioList/PortfolioList";
import "./Portfolio.scss";
import { featuredPortfolio, 
mobilePortfolio, 
reactPortfolio } 
from "../../data";


export default function Portfolio() {

const [ selected, setSelected ] = useState("featured")
const [ data, setData ] = useState([]);
const list = [
{
id: "featured",
title: "React.js"
},
{
id: "mobile",
title: "HTML/CSS"
},
{
id: "react-movie",
title: "media indexer"
},
];
useEffect(() => {

switch(selected){
case "featured":
setData(featuredPortfolio);
break;
case "mobile":
setData(mobilePortfolio);
break;
case "react-movie":
setData(reactPortfolio);
break;
default:
setData(featuredPortfolio);
}
}, [selected])

return (
<div className="portfolio" id="portfolio">
<h1>Portfolio</h1>
<ul>
{list.map(item => (
<PortfolioList 
title={item.title} 
active={selected === item.id}
setSelected={setSelected}
id={item.id}
/>
))}
</ul>
<div className="container">
{data.map(db => (
<div className="item">
<img 
src={db.img}
alt=""
/>
<h3>{db.title}</h3>
</div>
))}
</div>
</div>
);
}

{/* PortfolioList.jsx */}
import "./PortfolioList.scss";
export default function PortfolioList({ id, title, active, setSelected }) {
return (
<li className={active ? "PortfolioList active" : "PortfolioList"}
onClick={() => setSelected(id)}
>
{title}
</li>
);
}

Answer 1

你可以试试这个

<img
src={db.img}
alt=""
onClick={() => window.open('http://yourlink.com')}
/>

Answer 2

您是否尝试过将img包装在锚标记中？

<div className="item">
<a href="https://localhost:3000/">
<img src={db.img} />
</a>
<h3>{db.title}</h3>
</div>

Answer 3

这也发生在正常的HTM1中你可以通过将img封装在一个标签中来克服这个问题，比如@Rodney Golpe说

<a href="<your-url>">
<img
<!--All your other code-->
/>
</a>