如何在 React JS 中使用三元运算符将 Font Awesome Icons 与文本一起使用?

Posted

技术标签:

【中文标题】如何在 React JS 中使用三元运算符将 Font Awesome Icons 与文本一起使用?【英文标题】:How to use Font Awesome Icons with Text using ternary operator in React JS? 【发布时间】:2021-05-30 20:56:18 【问题描述】:

所以我有一个按钮,当我单击按钮时,文本会发生变化,并且我设法在单击后使用三元运算符更改文本,现在我想在文本之前添加来自 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>

【问题讨论】:

【参考方案1】:

你可以使用 react fragment 来包装字体真棒图标组件和文本。

注意:&lt;&gt;some content&lt;/&gt;&lt;React.Fragment&gt;some content&lt;/React.Fragment&gt; 的简写。

<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>;

【讨论】:

值得一提的是&lt;&gt;some content&lt;/&gt;&lt;React.Fragment&gt;some content&lt;/React.Fragment&gt;reactjs.org/docs/fragments.html的简写

以上是关于如何在 React JS 中使用三元运算符将 Font Awesome Icons 与文本一起使用?的主要内容,如果未能解决你的问题,请参考以下文章

React Js Es6 风格的三元运算符

夺命雷公狗-----React---15--三元运算符

如何在返回数组的return语句中使用三元运算符

React - 三元运算符和声纳

这些在 React 中使用三元运算符有条件地应用内联样式的方法在性能上是不是有任何差异?

三元运算符在 React 组件中用于设置 datalist 选项的值时失败