React中如何使用内联条件样式隐藏href为#的PDF下载链接

你可以直接使用React的条件渲染语法，判断pdf字段的值是否为#，仅当不等于#时才渲染PDF下载按钮即可。

具体修改步骤 #

• 找到项目卡片渲染代码中UtilityList标签内的PDF按钮代码
• 用条件判断包裹该组件，修改后的代码如下：

<UtilityList>
  <ExternalLinks href={source}>Code</ExternalLinks>
  {/* 仅当pdf不等于#时渲染PDF下载按钮 */}
  {pdf !== '#' && <ExternalLinks href={pdf} download>PDF</ExternalLinks>}
  <ExternalLinks href={visit}>Live</ExternalLinks>
</UtilityList>

实现逻辑说明 #

上述代码利用了JavaScript的短路运算规则：当pdf !== '#'判断为真时，才会执行后续的组件渲染逻辑；如果判断为假（即pdf值为#），则会直接跳过该组件的渲染，自然不会显示对应的PDF下载链接。
如果需要保留按钮位置仅隐藏显示，也可以给组件加条件样式实现：

<ExternalLinks href={pdf} download style={{display: pdf === '#' ? 'none' : 'inline-block'}}>PDF</ExternalLinks>

内容的提问来源于stack exchange，提问作者Juan