react如何设置条件

条件渲染方法

在React中实现条件渲染可以通过多种方式实现，以下是几种常见的方法：

三元运算符 适用于简单的条件判断，语法紧凑但可读性较低：

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

逻辑与运算符（&&） 适用于需要单一条件触发渲染的情况：

{hasUnreadMessages && <MessageCount count={unreadCount} />}

if-else语句 在组件函数体内使用传统条件语句：

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

立即执行函数 适合复杂条件逻辑的场景：

{
  (() => {
    if (error) return <ErrorDisplay />;
    if (loading) return <Spinner />;
    return <DataView />;
  })()
}

条件样式处理

动态className 结合模板字符串实现条件样式：

<div className={`button ${isActive ? 'active' : ''}`} />

style对象 内联样式的条件控制：

<div style={{ display: shouldShow ? 'block' : 'none' }} />

高阶组件模式

HOC条件渲染 创建可复用的条件逻辑组件：

function withCondition(Component, conditionFn) {
  return props => 
    conditionFn(props) ? <Component {...props} /> : null;
}

渲染优化技巧

组件记忆化 配合React.memo避免不必要的重渲染：

const MemoizedComponent = React.memo(({ data }) => {
  return data ? <ExpensiveRender data={data} /> : <Placeholder />;
});

key属性控制 通过改变key强制重新挂载组件：

<Form key={formVersion} />

注意事项

条件渲染时应考虑组件生命周期影响，避免在渲染过程中产生副作用。对于频繁切换的条件，建议使用CSS的display属性控制可见性而非完全卸载组件。复杂业务逻辑建议封装为自定义Hook保持组件简洁。