如何在React JS中使用三元运算符在文本中使用带有字体的真棒图标?

沙赫里亚尔

所以我有一个按钮,当我单击按钮时,文本发生了变化,我设法使用三元运算符单击后更改了文本,现在我想在文本之前添加超赞的字体图标。我使用了钩子来更改按钮文本。有什么办法可以在文本之前添加这些图标?

代码

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>
马埃里·阿里(Maheer Ali)

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

注意: <>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>;

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在SQL Server 2008中使用三元运算符?

来自分类Dev

如何在三元条件运算符中使用Optional变量?

来自分类Dev

如果在jstl中使用三元运算符,如何写其他条件?

来自分类Dev

如何使用@Model(TimeSpan)在剃须刀中使用三元运算符?

来自分类Dev

如何在使用三元运算符的if语句中使用AND

来自分类Dev

我想在react-native中使用三元运算符如何解决我的代码?

来自分类Dev

jsx中的三元运算符以包含带有react的html

来自分类Dev

如何在React中使用增量运算符

来自分类Dev

如何在三元运算符中使用多个语句时摆脱“避免使用不必要的语句”

来自分类Dev

如何在JSX / React中使用三元运算符呈现多个组件?

来自分类Dev

如何在React组件的jsx和typescript中使用三元运算符?

来自分类Dev

如何在React中使用TypeScript进行简单的三元运算?

来自分类Dev

如何使用React使用三元运算符重构代码?

来自分类Dev

如何在EJS中使用三元运算符

来自分类Dev

Vue.js-如何使用三元运算符返回带有字体真棒图标的Vue中的html

来自分类Dev

如何使用Vue.js过滤器在道具中使用三元运算符?

来自分类Dev

如何在带有过滤器的Vue模板中使用三元运算符?

来自分类Dev

如何使用三元运算符显示元素

来自分类Dev

如何在函数的参数中使用php三元运算符?

来自分类Dev

如何在PHP中使用三元运算符中的continue关键字

来自分类Dev

如何在使用三元运算符的if语句中使用AND

来自分类Dev

如何在awk中使用三元运算符写入文件?

来自分类Dev

如何使用混合了逻辑OR的三元运算符?

来自分类Dev

如何在SQL查询中使用速记三元运算符php?

来自分类Dev

如何在字符串中使用运算符三元?

来自分类Dev

如何在swift中使用三元运算符在数组中找到最小值

来自分类Dev

如何在 cshtml 页面中使用三元运算符。(剃刀视图引擎)

来自分类Dev

如何在 PHP 的邮件中使用 PHP 三元条件运算符?

来自分类Dev

如何在 pug 中使用三元运算符添加条件标签?

Related 相关文章

  1. 1

    如何在SQL Server 2008中使用三元运算符?

  2. 2

    如何在三元条件运算符中使用Optional变量?

  3. 3

    如果在jstl中使用三元运算符,如何写其他条件?

  4. 4

    如何使用@Model(TimeSpan)在剃须刀中使用三元运算符?

  5. 5

    如何在使用三元运算符的if语句中使用AND

  6. 6

    我想在react-native中使用三元运算符如何解决我的代码?

  7. 7

    jsx中的三元运算符以包含带有react的html

  8. 8

    如何在React中使用增量运算符

  9. 9

    如何在三元运算符中使用多个语句时摆脱“避免使用不必要的语句”

  10. 10

    如何在JSX / React中使用三元运算符呈现多个组件?

  11. 11

    如何在React组件的jsx和typescript中使用三元运算符?

  12. 12

    如何在React中使用TypeScript进行简单的三元运算?

  13. 13

    如何使用React使用三元运算符重构代码?

  14. 14

    如何在EJS中使用三元运算符

  15. 15

    Vue.js-如何使用三元运算符返回带有字体真棒图标的Vue中的html

  16. 16

    如何使用Vue.js过滤器在道具中使用三元运算符?

  17. 17

    如何在带有过滤器的Vue模板中使用三元运算符?

  18. 18

    如何使用三元运算符显示元素

  19. 19

    如何在函数的参数中使用php三元运算符?

  20. 20

    如何在PHP中使用三元运算符中的continue关键字

  21. 21

    如何在使用三元运算符的if语句中使用AND

  22. 22

    如何在awk中使用三元运算符写入文件?

  23. 23

    如何使用混合了逻辑OR的三元运算符?

  24. 24

    如何在SQL查询中使用速记三元运算符php?

  25. 25

    如何在字符串中使用运算符三元?

  26. 26

    如何在swift中使用三元运算符在数组中找到最小值

  27. 27

    如何在 cshtml 页面中使用三元运算符。(剃刀视图引擎)

  28. 28

    如何在 PHP 的邮件中使用 PHP 三元条件运算符?

  29. 29

    如何在 pug 中使用三元运算符添加条件标签?

热门标签

归档