REACTJS 中 If 语句的正确使用

Question

只是玩 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 {}

还有

{链接}？ :

Answer 1

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;