react 控制元素显示隐藏

最新推荐文章于 2024-05-30 15:14:59 发布

m0_黎明

最新推荐文章于 2024-05-30 15:14:59 发布

阅读量2k

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74265396/article/details/131495729

版权

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