第一种：用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> ) }
