只是玩 REACTJS,这个简单的 if 语句让我发疯...... 我在“链接”区域有评论,我想在其中添加 IF 语句,以便仅当传递的 {link} 参数具有值时才会显示链接.....
希望这是有道理的:
//import { BsGithub } from "react-icons/bs";
//import { FaYoutube } from "react-icons/fa";
import { FaEye } from "react-icons/fa";
interface Props {
title: string;
des: string;
src: string;
link: string;
}
const ProjectsCard = ({ title, des, src, link}: Props) => {
return (
<div className="w-full p-4 xl:px-12 h-auto xl:py-10 rounded-lg shadow-shadowOne flex flex-col bg-gradient-to-r from-bodyColor to-[#202327] group hover:bg-gradient-to-b hover:from-gray-900 hover:gray-900 transition-colors duration-1000">
<div className="w-full h-[80%] overflow-hidden rounded-lg">
<img
className="w-full h-60 object-cover group-hover:scale-110 duration-300 cursor-pointer"
src={src}
alt="src"
/>
</div>
<div className="w-full mt-5 flex flex-col gap-6">
<div>
<div className="flex items-center justify-between">
<h3 className="text-base uppercase text-designColor font-bold">
{title}
</h3>
<div className="flex gap-2">
// Need if Statement here ... show link only if 'link' parameter has a value
// Guess I can't do if {link.length} > 0 {
<a href={link} target="_blank">
<span className="text-lg w-10 h-10 rounded-full bg-black inline-flex justify-center items-center text-gray-400 hover:text-designColor duration-300 cursor-pointer">
<FaEye />
</span>
</a>
// end if statement here
</div>
</div>
<p className="text-sm tracking-wide mt-3 hover:text-gray-100 duration-300">
{des}
</p>
</div>
</div>
</div>
);
};
export default ProjectsCard;
我试过了:
如果 {link.length} > 0 {}
还有
{链接}? :
link
预计会以字符串形式返回,因此您可以检查它是否为空字符串。请参阅下面的更新代码:
//import { BsGithub } from "react-icons/bs";
//import { FaYoutube } from "react-icons/fa";
import { FaEye } from "react-icons/fa";
interface Props {
title: string;
des: string;
src: string;
link: string;
}
const ProjectsCard = ({ title, des, src, link}: Props) => {
return (
<div className="w-full p-4 xl:px-12 h-auto xl:py-10 rounded-lg shadow-shadowOne flex flex-col bg-gradient-to-r from-bodyColor to-[#202327] group hover:bg-gradient-to-b hover:from-gray-900 hover:gray-900 transition-colors duration-1000">
<div className="w-full h-[80%] overflow-hidden rounded-lg">
<img
className="w-full h-60 object-cover group-hover:scale-110 duration-300 cursor-pointer"
src={src}
alt="src"
/>
</div>
<div className="w-full mt-5 flex flex-col gap-6">
<div>
<div className="flex items-center justify-between">
<h3 className="text-base uppercase text-designColor font-bold">
{title}
</h3>
<div className="flex gap-2">
{link !== "" && (
<a href={link} target="_blank">
<span className="text-lg w-10 h-10 rounded-full bg-black inline-flex justify-center items-center text-gray-400 hover:text-designColor duration-300 cursor-pointer">
<FaEye />
</span>
</a>
)}
</div>
</div>
<p className="text-sm tracking-wide mt-3 hover:text-gray-100 duration-300">
{des}
</p>
</div>
</div>
</div>
);
};
export default ProjectsCard;