在TSX文件的JSX语法中如何正确修改a标签的href属性值？

问题原因 #

你当前的写法不符合TSX（React）的声明式开发范式：

1. JSX大括号内执行DOM操作时，目标a标签大概率还未被挂载到真实DOM树，document.querySelector根本获取不到对应元素
2. 就算偶尔能获取到元素，后续React触发组件重渲染时，会用你写死的href="https://default.xlsx"覆盖你手动修改的DOM属性，所以修改不会持久生效

正确实现方案 #

直接把条件判断绑定到href属性即可，React会自动根据selectedTab的状态变化更新属性值，不需要手动操作DOM：

<section>
  <a 
    href={selectedTab === TabLabel[Object.keys(TabType)[0]] 
      ? "https://default.xlsx" 
      : "https://change.xlsx"} 
    className="form-download-btn" 
    download
  >
    Download Excel File
  </a>
</section>

如果觉得条件太长影响可读性，也可以提前把href值抽成变量：

// 组件逻辑部分提前计算href值
const downloadUrl = selectedTab === TabLabel[Object.keys(TabType)[0]] 
  ? "https://default.xlsx" 
  : "https://change.xlsx"

// JSX部分直接引用变量
<section>
  <a 
    href={downloadUrl}
    className="form-download-btn" 
    download
  >
    Download Excel File
  </a>
</section>

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