react中的v-if条件渲染

前言：在vue中根据变量或者表达式来控制dom元素和组件的展示与隐藏，但是在react中没有封装好的指令可以使用，下面一起看下在react中是怎样实现v-if类似的效果。

1、单个元素（组件）渲染

在react中使用了jsx语法，在jsx语法中可以直接将表达式和元素写在一起，所以在react中实现条件渲染就可以直接使用js中的 && 运算符，如：

import React, { useState } from 'react'
export default function ConditionRender() {
  const [isShow, setShow] = useState(true)
  const handleClick = () => setShow(preData => !preData)
  return (
    <div>
      {isShow && <div>我是条件渲染的数据</div>}
      <button onClick={handleClick}>
        点击切换
      </button>
    </div>
  )
}

上述代码中定义一个控制显示的变量和点击改变变量的按钮，在jsx语法中直接使用逻辑运算符 && , 当isShow变量（&&前面不一定是单个变量也可以是一组或者表达式）为true时，则后面的dom元素（不只是元素组件也可以）显示，为false时隐藏。页面效果如下：

2、两个元素（组件）渲染

在我们平时开发中可能不只一个元素渲染的判断，还可能有两个或者三个展示，这个时候我们继续使用 && 运算符进行渲染就比较麻烦并且不易读，这个时候我们可以使用三目表达式来进行判断，如：

import React, { useState } from 'react'

export default function ConditionRender() {
  const [isShow, setShow] = useState(true)
  const handleClick = () => setShow(preData => !preData)
  return (
    <div>
      { isShow ? <div>我是三目运算符渲染的数据</div> : <div>我是条件渲染的数据</div> }
      <button onClick={handleClick}>
        点击切换
      </button>
    </div>
  )
}

上面代码就把&&运算符判断改为了三目表达式的方式进行渲染相应的元素。

3、很多个元素（组件）渲染

有的业务场景下我们可能会有多个元素或者组件的判断展示，那我们可以利用提取函数或者组件的方式进行判断，如：

import React, { useState } from 'react'

export default function ConditionRender() {
  const [isShow, setShow] = useState(1)
  const handleClick = () => setShow(preData => preData + 1)
  const ShowNode = () => {
    switch (isShow) {
      case 0:
        return <div>我是第0个数据</div>
      case 1:
        return <span>我是第1个数据</span>
      case 2:
        return <div>我是第2个数据</div>
      default:
        break;
    }
  }
  return (
    <div>
      { <ShowNode /> }
      { ShowNode() }
      <button onClick={handleClick}>
        点击切换
      </button>
    </div>
  )
}

上述代码中将可能需要展示的元素（组件）提取出来，第一种方式是当作react中的函数式组件来进行加载，同时可以进行组件间的传参。第二种加载方式是将需要展示的元素提取到函数中进行判断，然后进行函数调用加载。在jsx语法中这两种方式都可以直接进行展示。效果如下：