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

Question

基本上我需要显示和隐藏div，上箭头和下箭头图标应该相应地更改。到目前为止，只有UP箭头图标在工作并显示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

单击处理程序每次都设置状态true。

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

Answer 3

您应该更改"i〃；标签：

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