React 中的条件渲染实现的多种方法

在React中，实现条件渲染通常有以下几种方法：

使用JavaScript表达式




{isLoggedIn && <UserProfile />}

使用if-else语句（不常用，因为JSX不是过程式的）




{
  if (isLoggedIn) {
    <UserProfile />
  } else {
    <GuestProfile />
  }
}

使用switch语句（同样不常用）




{
  switch (userType) {
    case 'admin':
      return <AdminProfile />;
    case 'user':
      return <UserProfile />;
    default:
      return <GuestProfile />;
  }
}

使用&&运算符进行简单的条件渲染




{showProfile && <UserProfile />}

使用三元运算符（Ternary Operator）




{isLoggedIn ? <UserProfile /> : <GuestProfile />}

使用逻辑与（&&）进行连续条件渲染




{isLoggedIn && isAdmin && <AdminDashboard />}

使用逻辑或（||）进行默认条件渲染




{isLoggedIn || <GuestProfile />}

使用条件运算符（Conditional Operator）和逻辑与（&&）结合进行复杂条件渲染




{isLoggedIn && <UserProfile user={user} />}

使用?:运算符和逻辑与（&&）结合进行复杂条件渲染




{isLoggedIn ? <UserProfile user={user} /> : null}

使用v16.6+的React.createPortal创建条件渲染的DOM节点




{showModal && ReactDOM.createPortal(<Modal />, document.body)}

使用React.Fragment进行条件渲染




{isLoggedIn && (
  <React.Fragment>
    <UserProfile />
    <UserMenu />
  </React.Fragment>
)}

使用函数进行条件渲染




{renderProfile()}
 
function renderProfile() {
  if (isLoggedIn) {
    return <UserProfile />;
  }
  return null;
}

使用key属性进行条件渲染




{isLoggedIn ? <UserProfile key="user-profile" /> : <GuestProfile key="guest-profile" />}

使用React.cloneElement进行条件渲染




{isLoggedIn ? React.cloneElement(<UserProfile />, { user: userData }) : <GuestProfile />}

使用高阶组件（HOC）进行条件渲染




{isLoggedIn ? <WithUserProfile /> : <WithoutUserProfile />}

使用component属性进行条件渲染




{isLoggedIn ? <Route component={UserProfile} /> : <Route component={GuestProfile} />}

使用render属性进行条件渲染




<Route
  path="/user"
  render={() => (
    isLoggedIn ? <UserProfile /> : <Redirect to="/login" />
  )}
/>

以上是React中实现条件渲染的常用方法，开发者可以根据具体场景选择合适的方法。

React 中的条件渲染实现的多种方法

评论已关闭

推荐阅读