我正在使用 React 和 Tailwind 開發我的個人作品集網站。我試圖弄清楚只有當我通過 data.js 檔案提供 GitHub 鏈接時，如何為我的專案卡顯示“GitHub”按鈕。
我正在使用卡片組件和地圖方法為 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"
}, ...
專案.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>
);
}
uj5u.com熱心網友回復：
使用條件，如下所示：
{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>
)}
uj5u.com熱心網友回復：
有幾種方法可以有條件地呈現元素/組件：您可以使用&&運算子
{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
}
還有其他方法可以實作這一點，重要的是要記住它們都涉及引入一個條件來確定元素是否應該呈現。
uj5u.com熱心網友回復：
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>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/345880.html
標籤：javascript 反应 按钮