时间戳

首页 > 解决方案 > 如何使用 useState 有条件地渲染？

reactjs - 如何使用 useState 有条件地渲染？

问题描述

我正在尝试使用 useState 有条件地渲染一个 div，但对于我的生活，我无法弄清楚如何去做。我想我很接近但我看不出我做错了什么，我完全误解了如何做到这一点。我究竟做错了什么？我已经写了这个，它不起作用..

import React, { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWindowClose } from '@fortawesome/free-solid-svg-icons'

function ElementMenuHeader() {
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(true)
const handleClick = () => setElementMenuOpenClose(false)

return (
    <div id="App-Close-Element-Menu-Container"
    style={{ display: elementMenuOpenClose ? 'block' : 'none'}}
    >
    <button id="App-Close-Element-Menu"
        onClick={() => handleClick }
    >
        <FontAwesomeIcon icon={faWindowClose} />
    </button>
    </div>
);
}

export default ElementMenuHeader

理想情况下，我也希望能够elementMenuOpenClose从其他组件设置状态，但我想我会先过这座桥。

标签： reactjsreact-hookssetstate

解决方案

您可以只使用三元运算符并检查运算符条件中的状态，根据状态返回您想要的 div：

{(elementMenuOpenClose? <div>some tags A </div>: <div>Some tags B </div>)}

推荐阅读