Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2021-04-19

React Conditionals

react 组件可以通过条件判断显示不同的内容。比如:

function App() {
  const isAuthUser = useAuth()

  if (isAuthUser) {
    // if our user is authenticated, let them use the app
    return <AuthApp />
  }

  // if user is not authenticated, show a different screen
  return <UnAuthApp />
}

三元运算符简化条件判断

function App() {
  const isAuthUser = useAuth()

  return (
    <>
      <h1>My App</h1>
      {isAuthUser ? <AuthApp /> : <UnAuthApp />}
    </>
  )
}