React 中实现 v-if & v-else

Vue 中的 v-if & v-else

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

<h1 v-if="show">阿峰是菜鸟</h1>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="show">阿峰是菜鸟</h1>
<h1 v-else>Oh no  </h1>

React中实现

如果单单只想实现 v-if 的话，可以借助 && 逻辑运算符

import { useState } from 'react'
function Demo() {

  const [show, setShow] = useState(false)
  const changeShow = () => {
    setShow(!show)
  }

  return (
    <div>
      {show && <h1>阿峰是菜鸟</h1>}
      <button onClick={changeShow}>点我</button>
    </div>
  )
}

如果想实现 v-if 和 v-else 的话，可以借助 三元运算符

import { useState } from 'react'
function Demo() {

  const [show, setShow] = useState(false)
  const changeShow = () => {
    setShow(!show)
  }

  return (
    <div>
      {show ? <h1>阿峰是菜鸟</h1> : <h1>菜鸟是阿峰</h1>}
      <button onClick={changeShow}>点我</button>
    </div>
  )
}