第一种:用style来显示隐藏
import React, { useState } from 'react'
export default function Boke() {
const [isShow,setisShow] = useState(false)
const check = ()=>{
setisShow(!isShow)
}
return (
<div>
{/*第一种方式,用style来显示隐藏*/}
<button style={{display:isShow?'block':'none'}}>张三</button>
<button style={{display:isShow?'none':'block'}}>李四</button>
<button onClick={()=>check()}>点击切换</button>
</div>
)
}
第二种:用三元运算符
import React, { useState } from 'react'
export default function Boke() {
const [isShow, setisShow] = useState(false)
const check = () => {
setisShow(!isShow)
}
return (
<div>
{/*第二种方法,用三元运算符*/}
{isShow ? <button >张三</button> : <button >李四</button>}
<button onClick={() => check()}>点击切换</button>
</div>
)
}
第三种:通过短路逻辑进行元素显隐
import React, { useState } from 'react'
export default function Boke() {
const [isShow, setisShow] = useState(false)
const check = () => {
setisShow(!isShow)
}
return (
<div>
{/*第三种方式*/}
{isShow && <button >张三</button>}
{!isShow && <button >李四</button>}
<button onClick={() => check()}>点击切换</button>
</div>
)
}