创建一个适用于每个项目的锚标记

Question

我想做的:

当我点击一张卡片的图片时，重定向到项目URL

有什么问题吗?

问题是我有3个不同的文件需要连接

注意:我想添加一个外部URL，而不是页面内的链接

有/data/projects.js:

const projects = [
{
id: 'a',
name: 'YoLo ecommerce',
desc: ' chlotes for women, created in React.js',
img: Yolo,
},
{
id: 'b',
name: 'My Crypto Tracker',
desc: 'An App to see the Crypto market. React.js/Chart.js',
img: Trade,
},

注意，也许我必须插入URL像一个项目

我有组件/projtem .js:

export default function ProjectItem({
img = ProjectImg,
title = 'Project Name',
desc = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
}) {
return (
<ProjectItemStyles>
<Link to="/projects" className="projectItem__img">
<img src={img} alt="project img" />
</Link>
<div className="projectItem__info">
<Link to="#">
<h3 className="projectItem__title">{title}</h3>
</Link>
<p className="projectItem__desc">{desc}</p>
</div>
</ProjectItemStyles>
);
}

注意，这里是我认为我必须把项目URL的正确路径。

然后我有适当的页面/项目。js:

return (
<>
<ProjectStyle>
<div className="container">
<SectionTitle
heading="Projects"
subheading="some of my recent works"
/>
<div className="projects__searchBar">
<form>
<input
type="text"
value={searchText}
onChange={handleChange}
placeholder="Project Name"
/>
<MdSearch className="searchIcon" />
</form>
</div>
<div className="projects__allItems">
{projectsData.map((item) => (
<ProjectItem
key={item.id}
title={item.name}
desc={item.desc}
img={item.img}
/>
))}
</div>
</div>
</ProjectStyle>
</>
);
}

我试图在<ProjectItem>之外添加锚标记，但我无法使其工作。

Answer 1

谢谢大家!一个朋友找到解决办法:

/数据/projects.js

const projects = [
{
id: uuidv4(),
name: 'YoLo ecommerce',
desc: ' chlotes for women, created in React.js',
img: Yolo,
link: 'https://yolocommerce.netlify.app',
},
{
id: uuidv4(),
name: 'My Crypto Tracker',
desc: 'An App to see the Crypto market. React.js/Chart.js',
img: Trade,
link: 'https://crypto-trackerfederico.netlify.app',
},

组件/projectItem.js

export default function ProjectItem({
img = ProjectImg,
title = 'Project Name',
desc = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
link,
}) {
return (
<ProjectItemStyles>
<a href={link}>
<img src={img} alt="project img" />
<div className="projectItem__info">
<h3 className="projectItem__title">{title}</h3>
<p className="projectItem__desc">{desc}</p>
</div>
</a>
</ProjectItemStyles>
);
}

页面/project.js

return (
<>
<ProjectStyle>
<div className="container">
<SectionTitle
heading="Projects"
subheading="some of my recent works"
/>
<div className="projects__searchBar">
<form>
<input
type="text"
value={searchText}
onChange={handleChange}
placeholder="Project Name"
/>
<MdSearch className="searchIcon" />
</form>
</div>
<div className="projects__allItems">
{projectsData.map((item) => (
<ProjectItem
key={item.id}
title={item.name}
desc={item.desc}
img={item.img}
link={item.link}
/>
))}
</div>
</div>
</ProjectStyle>
</>
);
}