如何在 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 来包装字体真棒图标组件和文本。
注意:<>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>;
【讨论】:
值得一提的是<>some content</>
是<React.Fragment>some content</React.Fragment>
reactjs.org/docs/fragments.html的简写以上是关于如何在 React JS 中使用三元运算符将 Font Awesome Icons 与文本一起使用?的主要内容,如果未能解决你的问题,请参考以下文章