条件渲染

约 164 字小于 1 分钟

2026-09-16

React 中的条件渲染和 Vue 就不太一样了, Vue 中有 v-if 和 v-show 来实现条件渲染, 而 React 中没有类似的指令, 只能通过 JavaScript 的条件语句来实现。

比如直接使用 if 语句来判断是否渲染某个组件, 或者使用三元运算符来实现条件渲染, 甚至可以使用逻辑与运算符来实现条件渲染。

function MyComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    return <div>Welcome back!</div>
  }
  else {
    return <div>Please log in.</div>
  }
}

function MyComponent2({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <div>Welcome back!</div> : <div>Please log in.</div>}
    </div>
  )
}

function MyComponent3({ isLoggedIn }) {
  return (
    <>
      {isLoggedIn && <div>Welcome back!</div>}
    </>
  )
}