如何解决如何使用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
的状态,但是我想我会首先跨过这座桥。
解决方法
您可以只使用三元运算符,并在运算符条件下对照状态检查a,然后根据状态返回所需的div:
{(elementMenuOpenClose? <div>some tags A </div>: <div>Some tags B </div>)}
,
您的父组件可能为ElementMenuHeader
。
假设是ParentElementMenuHeader
。
在ParentElementMenuHeader
组件内部,您可以定义类似
const ParentElementMenuHeader = () => {
const [elementMenuOpenClose,setElementMenuOpenClose] = useState(true);
...
return (
...
{elementMenuOpenClose && (
<ElementMenuHeader
setElementMenuOpenClose={setElementMenuOpenClose}
...
/>
)}
...
);
}
内部ElementMenuHeader组件,
import React,{ useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faWindowClose } from '@fortawesome/free-solid-svg-icons'
function ElementMenuHeader({setElementMenuOpenClose}) {
const handleClick = () => setElementMenuOpenClose(false)
return (
<div id="App-Close-Element-Menu-Container">
<button id="App-Close-Element-Menu" onClick={handleClick}>
<FontAwesomeIcon icon={faWindowClose} />
</button>
</div>
);
}
export default ElementMenuHeader
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。