react 控制元素显示隐藏

第一种：用style来显示隐藏

import React, { useState } from 'react'
 
export default function Boke() {
  const [isShow,setisShow] = useState(false)
  const check = ()=>{
    setisShow(!isShow)
  }
  return (
    

        {/*第一种方式，用style来显示隐藏*/}
        张三
        李四
        check()}>点击切换
      
  )  
}

第二种：用三元运算符

import React, { useState } from 'react'
 
export default function Boke() {
  const [isShow, setisShow] = useState(false)
  const check = () => {
    setisShow(!isShow)
  }
  return (
    

      {/*第二种方法，用三元运算符*/}
      {isShow ? 张三 : 李四}
       check()}>点击切换
    
  )
}

第三种：通过短路逻辑进行元素显隐

import React, { useState } from 'react'
 
export default function Boke() {
  const [isShow, setisShow] = useState(false)
  const check = () => {
    setisShow(!isShow)
  }
  return (
    

      {/*第三种方式*/}
      {isShow && 张三}
      {!isShow && 李四}
       check()}>点击切换
    
  )
}