zoukankan      html  css  js  c++  java
  • React条件渲染

    1.按条件封装新组件

    在一个新的组件内根据不同的条件返回不同内容的组件

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

    2.使用元素变量

    将元素存入一个变量,作为变量表达式再渲染

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

    3.与运算符&&

    当条件满足再渲染,true && expression 总是会返回 expression,而 false && expression 总是会返回 false

    { unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2}

    4.三目运算符

         {isLoggedIn ? (
            <LogoutButton onClick={this.handleLogoutClick} />
          ) : (
            <LoginButton onClick={this.handleLoginClick} />
          )}

    5.组件名是表达式

    const components = {
      photo: PhotoStory,
      video: VideoStory
    };
    
    function Story(props) {
      // 正确!JSX 类型可以是大写字母开头的变量。
      const SpecificStory = components[props.storyType];
      return <SpecificStory story={props.story} />;
    }

    PS:如果组件想隐藏,使用return null;且不影响正常的证明周期

    !!!不能使用undefine,相当于什么都没返回,会报错

  • 相关阅读:
    linux安装教程
    html学习
    vscode编程nodejs初始安装
    Python 字符串前面加u,r,b的含义
    vs code中自动添加注释插件koroFileHeader
    *args和**kwargs用法
    python中map函数的用法
    Python中虚拟环境venv的基本用法
    ubuntu下安装git提示无root权限
    git连接gitee笔记
  • 原文地址:https://www.cnblogs.com/lyraLee/p/11567661.html
Copyright © 2011-2022 走看看