[英]Vue.js - How to use ternary operator to return html in vue with font awesome icons
[英]How to use Font Awesome Icons with Text using ternary operator in React JS?
所以我有一个按钮,当我单击按钮时,文本会发生变化,并且我设法在单击后使用三元运算符更改文本,现在我想在文本之前添加来自 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>
您可以使用反应片段来包装字体真棒图标组件和文本。
注意: <>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>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.