React中如何通过三元运算符为按钮文本搭配前置Font Awesome图标

现有代码存在的问题 #

• JSX语法不匹配：原生HTML写法的class="buttons"在React中需要替换为className
• 图标和文本的渲染逻辑无包裹：三元分支内直接相邻放图标和文本节点，会受JSX隐式空白规则影响出现间距不可控、基线不对齐的问题
• 状态冗余：btnText和disableBtn两个状态的变化完全同步，拆分维护容易出现状态不一致的问题
• 禁用态不完整：仅通过className标识禁用状态，未绑定原生disabled属性，会导致禁用按钮仍可触发点击事件、屏幕阅读器无法正确识别按钮状态

修正后的可运行代码 #

import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus, faCheck } from '@fortawesome/free-solid-svg-icons'

// 合并冗余状态，用单个值同步关联按钮文本、禁用状态
const [isAdded, setIsAdded] = useState(false)

<div className="buttons">
  <button
    className={isAdded ? "addToClub disable" : "addToClub"}
    disabled={isAdded}
    onClick={() => {
      handleTransfer(props.players)
      setIsAdded(true)
    }}
  >
    {isAdded ? (
      <span className="btn-inner">
        <FontAwesomeIcon icon={faCheck} />
        <span>Player Already Added</span>
      </span>
    ) : (
      <span className="btn-inner">
        <FontAwesomeIcon icon={faPlus} />
        <span>Add to Club</span>
      </span>
    )}
  </button>
</div>

配套样式建议 #

加少量CSS保证图标和文本垂直居中、间距统一，避免排版错位

.btn-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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