【每日一练】在JSX中使用条件渲染

2023-11-02

 

 

//条件渲染
//技术方案:三元表达式 逻辑&&运算

//1.三元表达式:满足条件才渲染一个span标签

const flag = true

function App() {
  return (
    <div className="App">
      {flag ?
        (<div>
          <h1><span>我是JackWoot</span></h1>
          <h4>喜欢敲代码 喜欢新技术</h4>
        </div>
        )
        : null
      }
    </div>
  )
}

export default App

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【每日一练】在JSX中使用条件渲染 的相关文章

随机推荐

  • Docker 安装 Nginx(三)

    Nginx 是一个高性能的 HTTP 和反向代理 web 服务器 同时也提供了 IMAP POP3 SMTP 服务 以前没有用Docker时 直接在服务器中下载 安装 修改配置 运行Nginx 一套完整流程下来花费的时间也就那样 但是 自从
  • RabbitMQ - 消息堆积问题的最佳解决方案?惰性队列

    目录 一 惰性队列 1 1 消息堆积问题 1 2 消息堆积问题的解决方法 从消费者的角度 从队列的角度 1 3 引入惰性队列 1 3 1 什么是惰性队列 1 3 2 惰性队列的使用 1 3 3 效果演示 一 惰性队列 1 1 消息堆积问题
  • StringUtils.isEmpty和StringUtils.isBlank用法

    a target blank href http blog csdn net ocean20 article details 6674077 转载自 http blog csdn net ocean20 article details 66
  • Ubuntu22.04编译安装FFmpeg

    FFmpeg介绍 概述 FFmpeg是一款用C语言编写的跨平台免费开源多媒体处理工具 该软件可实现音视频的采集 编解码 转码 过滤以及流媒体相关操作等功能 同时 FFmpeg也为其他多种语言和操作系统提供了开发组件 包括Java Pytho
  • Android的init过程:init.rc解析流程

    这几天打算看下安卓的代码 看优秀的源码也是一种学习过程 看源码的过程就感觉到 安卓确实是深受linux内核的影响 不少数据结构的用法完全一致 花了一中午时间 研究了下init rc解析过程 做个记录 init rc 文件并不是普通的配置文件
  • Ant内置任务之unjar/untar/unwar/unzip

    一 概述 unjar untar unwar unzip是Ant内置任务 用于解压zip war或jar文件 PatternSet用于选择从存档中提取的文件 资源集合用于选择执行解压的存档文件 Unjar Unwar Unzip只支持基于文
  • 并发编程系列之Fork/Join

    前言 上节我们讲了阻塞队列 Java中的并发容器就算有了个基本的认识 今天我们来介绍一种线程工作模式 叫Fork Join 他是JDK7之后提供的一个并行执行框架 主要的思想我觉得是分而治之 将一个大的任务分成多个小的任务并行执行 然后等所
  • 成为技术传播者(二):Why and Why NOT

    前文 成为技术传播者 一 写在前面 Contributing to Eclipse的开篇第一句话说得很有味道 Humans need to feel nurtured and cared for Humans also need to nu
  • 关于vs编译错误CL.exe已退出的解决方案

    IDE问题 VS2010突然无法编辑C 项目 会报错误 30 error MSB6006 CL exe 已退出 代码为 1073741701 这个问题是 我也碰到了 你改一下设置就好了 一劳永逸 随便打开一个项目 点击 视图 gt 属性管理
  • Vue 项目打包之后,CSS 找不到问题

    Vue 项目打包之后 CSS 找不到问题 记录日常开发中遇到的 坑 问题 我把vue项目打包之后放在本地的web环境下可以正常显示 但是我放到 nginx 服务器之后 找不到 css 文件 当时配置如下图 解决办法 我将 打包的路径从 v4
  • fastx常用控件

    目录 表格控件 bootstrap table 日历控件 bootstrap datepicker 通用帮助框 单选 多选 bootstrap标签页 通过设置数据字典来设置下拉框的值 表格控件 bootstrap table 自带搜索框 等
  • c++文件读写操作

    1 声明头文件 include 2 实例化对象 ifstream fin ifstream是中的一个类 fin是一个实例化对象 之所以起这个名字是类比cin 实际上他们有很多相似的地方 3 fin open 文件名 打开方式 本文的打开方式
  • 【机器视觉】——裂纹检测笔记

    目录 传统算法处理裂缝的基本思路 第一种思路 第二种思路 第三种思路 CPP代码 halcon代码 python代码 Matlab代码 深度学习缺陷检测 裂缝检测文献 传统算法处理裂缝的基本思路 第一种思路 1 先转换彩色图为灰度图 2 进
  • MySQL 8.0 隐藏索引

    隐式索引 最明显的一个作用类似 索引回收站 例如数据库长时间运行后 会积累很多索引 做数据库优化时 想清理掉没什么用的多余的索引 但可能删除某个索引后 数据库性能下降了 发现这个索引是有用的 就要重新建立 对于较大的表来说 删除 重建索引的
  • python筑基——基础知识作业汇总,学习笔记

    作业一 语法 变量 输 输出 基本运算 基本数据类型 字符串 类型转换 1 计算整型50乘以10再除以5的商并使用print输出 result 50 10 5 print result 2 判断整型8是否大于10的结果并使用print输出
  • codeforces 825 E Minimal Labels

    Problem codeforces com contest 825 problem E Reference 看第 5 条评论 Meaning 给出一个n个结点的DAG 找一个给结点编号的序列 且满足3个条件 编号为 1 n 每个编号出现且
  • 第三章:Linux环境基础开发工具使用

    系列文章目录 文章目录 系列文章目录 前言 一 yum 1 三板斧 2 扩展 3 软件包名称 二 vim 1 vim基本模式 2 vim基本操作 插入模式 命令模式 底行模式 注释 三 gcc g 1 预处理 2 编译 3 汇编 4 链接
  • Python opencv 机器学习 2.knn k近邻 ocr识别数字 使用digits.png(opencv自带)

    import cv2 import numpy as np from matplotlib import pyplot as plt 识别数字OCR img cv2 imread digits png gray cv2 cvtColor i
  • 见习网工之综合实验

    需求一 信息中心配置Eth trunk实现链路冗余 SW1 interface Eth Trunk1 mode lacp static least active linknumber 1 trunkport GigabitEthernet
  • 【每日一练】在JSX中使用条件渲染

    条件渲染 技术方案 三元表达式 逻辑 运算 1 三元表达式 满足条件才渲染一个span标签 const flag true function App return div flag div h1 span 我是JackWoot span h