小鸡啄米之React条件渲染_鸡啄米aop-优快云博客

本文链接：https://blog.youkuaiyun.com/xiapi3/article/details/106353294

本文深入探讨React中的条件渲染技巧，包括简易条件渲染、变量渲染、逻辑表达式渲染及三元运算渲染，帮助开发者掌握不同场景下的高效渲染策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React条件渲染

简易条件渲染
变量渲染
逻辑表达式渲染
三元运算渲染

简易条件渲染

最简单的条件渲染就是采用if函数来决定渲染哪个组件

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

该示例中，通过判断isLoggedIn状态来决定渲染哪个组件

变量渲染

简单理解：将jsx语法的组件赋值给一个变量

if (isLoggedIn) {
    button = <LogoutButton onClick={this.handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={this.handleLoginClick} />;
  }

逻辑表达式渲染

即采用 表达式 && 组件方式来决定渲染情况，若表达式为true则渲染组件，否则不渲染
示例：{this.state.flag && <Alert />}

三元运算渲染

采用三元表达式来渲染，相当于简易版if渲染
示例：this.state.flag ? <Alert /> : null

注意：当渲染位置为null时，表示不进行渲染！
如：

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }
  return (
    <div className="warning">
      警告!
    </div>
  );
}
<WarningBanner warn={this.state.warn}/>