如何使用字体Awesome图标与文本使用三元操作符在React JS?

Question

所以我有一个按钮，当我点击按钮的文本变化，我设法改变使用三元操作符点击后的文本，现在我想添加图标从字体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

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

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