我可以針對返回字符串的 if 條件禁用錨標記嗎

Question

我制作了一個錨標記（不是按鈕）文本來將我重定向到另一個頁面

<StyledTableCell align="center">
   <Link href={`/races/results/${race.id}`}>{race.race_name}</Link>
</StyledTableCell>

我確實有一個狀態列，指示比賽狀態。

<StyledTableCell align="center">                                        
   {getRaceStatus(race.start_date_time, race.end_date_time)}
</StyledTableCell>

我的 getRaceStatus 是，

export const getRaceStatus = (start_date, end_date) => {
const now = new Date();
const startX = new Date(start_date);
const endX = new Date(end_date);
if (startX.getTime() > now.getTime()) {
    return 'Coming Soon';
}
if (startX.getTime() <= now.getTime() && now.getTime() < endX.getTime()) {
    return 'Open';
} else {
    return 'Finished';
}

};

所以，我想在狀態不等於“打開”時禁用我的鏈接

有人可以幫我解決這個問題嗎？ 我試圖完成它，但我想要一些簡短易行的方法來完成要求。 謝謝

Answer 1

是否只在狀態為Open時放置一個<Link> ，否則只需要一個span就可以實現？

<StyledTableCell align="center">
   {getRaceStatus === 'Open' ? 
        <Link href={`/races/results/${race.id}`}>{race.race_name}</Link> :
        <span>{race.race_name}</span>
   }
</StyledTableCell>

如果沒有，您可以按照這篇文章的回答並根據狀態更改onClick function 來禁用鏈接。