向上和向下箭头图标功能在 Reactjs 中不起作用

Question

基本上我需要显示和隐藏 div，向上和向下箭头图标应该相应地改变。 截至目前，只有向上箭头图标正在工作并显示 div，但是当我尝试隐藏 div 时，它不起作用....我确实喜欢这个但它不起作用，我的代码有什么问题？ 任何人都可以帮助我吗？

这是我的代码

const [expand, setExpand] = useState(false); 

<div onClick={() => setExpand(true)}> 
    Accordion 
    <i className={`fas fa-chevron-up ${!expand ? 'fas fa-chevron-down' : ''}`}></i>
</div>
{expand && <div className="Accordion-Section"></div>}

Answer 1

你可以像这样设置className

<div onClick={() => setExpand(!expand)}> 
    Accordion 
    <i className={`fas ${expand ? 'fa-chevron-up' : 'fa-chevron-down'}`} />
</div>
{expand && <div className="Accordion-Section"></div>}

Answer 2

点击处理程序每​​次都将 state 设置为true 。

您应该将其更改为<div onClick={() => setExpand( expand)}> 。

Answer 3

您应该将“i”标签更改为：

<i className={ ${?expand: "fas fa-chevron-down" "fas fa-chevron-up"} }>