仅当通过另一个文件提供链接时如何显示按钮（React）

Posted 2023-02-22

【中文标题】仅当通过另一个文件提供链接时如何显示按钮（React）

【英文标题】：How to display button only when a link is provided via another file (React)

【发布时间】：2021-12-17 04:36:53

【问题描述】：

我正在使用 React 和 Tailwind 开发我的个人作品集网站。只有当我通过 data.js 文件提供 GitHub 链接时，我才试图弄清楚如何为我的项目卡显示“GitHub”按钮。

我正在使用卡片组件和 map 方法为 data.js 中提供的每个项目显示一张卡片。如您所见，我没有提供第一个项目的 GitHub 链接，但我提供了第二个项目。如何让我只提供 GitHub 链接的项目显示 GitHub 按钮？

我尝试创建一个函数，仅在提供了 href 值但不起作用时才显示按钮。任何可以引导我走向正确方向的建议都非常感谢。

GitHub 仓库：https://github.com/fotinh0/my-portfolio

数据.js

export const projects = [
  
    title: "PCI Media Website",
    subtitle: "Company Website using WordPress",
    description:
      "Maintained PCI Media's multi-page website as an intern using WordPress with the Divi theme. Increased traffic using SEO techniques and Google Analytics",
    skills: "Built with: WordPress, html, CSS",
    image: "./gif-files/pcimedia.gif",
    link: "https://www.pcimedia.org/",
    github: ""
  ,
  
    title: "Keeper App",
    subtitle: "React Clone of Google Keep",
    description:
      "Keep track of your notes and your to-do's using the Keeper App. Inspired by the Google Keep application.",
    skills: "Built with: React, Material UI",
    image: "./gif-files/keeper-app.gif",
    link: "https://keeper-app-fc.netlify.app/",
    github: "https://github.com/fotinh0/keeper-app"
  , ...

Projects.js

import  projects  from "../data";

export default function Projects() 
  return (
    <section id="projects" className="...">
      <div className="container ...">
        
        /* additional code here */

        /* Projects Cards */
        <div className="flex flex-wrap -m-4">
          projects.map((project) => (
            <a
              href=project.link
              key=project.image
              className="sm:w-1/2 w-100 p-4">
              
              /* additional code here */

              <div className="project-buttons ...">
                <a className="live-site ..." href=project.link target="_blank"> Live Site</a>
                <a className="github ..." href=project.github target="_blank">GitHub</a>
              </div>
            </a>
          ))
        </div>
      </div>
    </section>
  );

【参考方案1】：

使用条件，如下所示：

project.github && (
  <a className="github ..." href=project.github target="_blank">GitHub</a>
)

您可能想检查变量的长度是否大于零，然后您可以这样做：

project.github.length > 0 && (
  <a className="github ..." href=project.github target="_blank">GitHub</a>
)

【参考方案2】：

有几种方法可以有条件地渲染元素/组件： 您可以使用&& 运算符

project.github &&
  <a className="github ..." href=project.github target="_blank">GitHub</a>

或者你可以使用三元表达式：

project.github ?
  <a className="github ..." href=project.github target="_blank">GitHub</a>
  : null

还有其他方法可以实现这一点，重要的是要记住它们都涉及引入一个条件来确定元素是否应该呈现。

【参考方案3】：

import  projects  from "../data";

export default function Projects() 

  const renderGithubButton = (github) => 
    // If github.project is empty then it will show nothing
    // But if github.project exists then else will return
    if(github.length===0) return ""
    else return <a className="github ..." href=project.github target="_blank">GitHub</a>



  return (
    <section id="projects" className="...">
      <div className="container ...">
        
        /* additional code here */

        /* Projects Cards */
        <div className="flex flex-wrap -m-4">
          projects.map((project) => (
            <a
              href=project.link
              key=project.image
              className="sm:w-1/2 w-100 p-4">
              
              /* additional code here */

              <div className="project-buttons ...">
                <a className="live-site ..." href=project.link target="_blank"> Live Site</a>
                
                //Create a new function to check github exists or not.
                // send project.github as argument
                renderGithubButton(project.github)
              </div>
            </a>
          ))
        </div>
      </div>
    </section>
  );

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。