如何在 React JS 中使用三元運算符將 Font Awesome Icons 與文本一起使用？

Question

所以我有一個按鈕，當我單擊按鈕時，文本會發生變化，並且我設法在單擊后使用三元運算符更改文本，現在我想在文本之前添加來自 font awesome 的圖標。 我使用鈎子來更改按鈕文本。 有什么辦法可以在文本之前添加這些圖標？

代碼

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus,faCheck } from '@fortawesome/free-solid-svg-icons'
const [disableBtn,setDisableBtn]=useState(false)
const [btnText,setBtnText]=useState(true)
<div class="buttons">
        <button className={disableBtn ? "addToClub disable":"addToClub"} onClick={()=>{handleTransfer(props.players);setBtnText(!btnText);setDisableBtn(true)}} >
            {btnText? <FontAwesomeIcon icon={faPlus} /> "Add to Club"   : (<FontAwesomeIcon icon={faCheck} /> "Player Already Added") }
        </button>
       
</div>

Answer 1

您可以使用反應片段來包裝字體真棒圖標組件和文本。

注意： <>some content</>是<React.Fragment>some content</React.Fragment>的簡寫。

<button
   className={disableBtn ? "addToClub disable" : "addToClub"}
   onClick={() => {
      handleTransfer(props.players);
      setBtnText(!btnText);
      setDisableBtn(true);
   }}
>
   {btnText ? (
      <>
         <FontAwesomeIcon icon={faPlus} /> Add to Club
      </>
   ) : (
      <>
         <FontAwesomeIcon icon={faCheck} />
         Player Already Added
      </>
   )}
</button>;