首页 > 其他分享 >JSX基础

JSX基础

时间:2024-07-17 11:09:21浏览次数:12  
标签:function return type App 基础 const JSX

1.在JSX中可以通过 大括号语法{} 识别JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等

const message = 'this is message'
function getAge(){
  return 18
}
function App(){
  return (
    <div>
      <h1>this is title</h1>
      {/* 字符串识别 */}
      {'this is str'}
      {/* 变量识别 */}
      {message}
      {/* 函数调用 渲染为函数的返回值 */}
      {getAge()}
    </div>
  )
}

2.在JSX中可以使用原生js种的map方法 实现列表渲染

const list = [
  {id:1001, name:'Vue'},
  {id:1002, name: 'React'},
  {id:1003, name: 'Angular'}
]

function App(){
  return (
    <ul>
      {list.map(item=><li key={item.id}>{item}</li>)}
    </ul>
  )
}

3.在React中,可以通过逻辑与运算符&&、三元表达式(?:) 实现基础的条件渲染

const flag = true
const loading = false

function App(){
  return (
    <>
      {flag && <span>this is span</span>}
      {loading ? <span>loading...</span>:<span>this is span</span>}
    </>
  )
}

4.自定义函数渲染

const type = 1  // 0|1|3

function getArticleJSX(){
  if(type === 0){
    return <div>无图模式模版</div>
  }else if(type === 1){
    return <div>单图模式模版</div>
  }else(type === 3){
    return <div>三图模式模版</div>
  }
}

function App(){
  return (
    <>
      { getArticleJSX() }
    </>
  )
}

标签:function,return,type,App,基础,const,JSX
From: https://www.cnblogs.com/zhaohaha/p/18306884

相关文章

  • 零基础STM32单片机编程入门(十五) DHT11温湿度传感器模块实战含源码
    文章目录一.概要二.DHT11主要性能参数三.DHT11温度传感器内部框图四.DTH11模块原理图五.DHT11模块跟单片机板子接线和通讯时序1.单片机跟DHT11模块连接示意图2.单片机跟DHT11模块通讯流程与时序六.STM32单片机DHT11温度传感器实验七.CubeMX工程源代码下载八.小结一.......
  • 0基础学python-15:封装、继承和多态
    目录前言 一、封装(Encapsulation)私有变量: 二、继承(Inherit) 三、多态(Polymorphism)总结前言        封装、继承和多态是面向对象编程的三大基本特性,它们与面向对象编程(OOP)密切相关。  一、封装(Encapsulation)概念:封装指的是将数据(属性)和操作数据的方法......
  • 大模型LLM量化 , 5个基础技术知识
    写这篇文章原因下载qwen110B模型发现不同量化占的内存差异很大,就想搞明白到底量化会着重影响哪方面的推理能力“Qwen1.5-110B-Chat的显存全精度部署(32精度)占用220GB;8bit量化部署Qwen1.5-110B需要113GB显存;4bit量化部署Qwen1.5-110B,需要62GB显存大型语言模型(LL......
  • vue基础day01(MVVM、绑定、事件、结构模板)
    vue基础一、什么是vue构建用户界面的渐进式框架,采用自底向上逐层应用开发核心理念:数据驱动视图,组件化开发二、框架和库的区别框架:一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,需要重新架构整个项目库:提供了一个小的功能,对项目的侵入性较小,如果某个库无......
  • 开发基础笔记
    1、Springboot2.0以后默认的数据库连接池是哪个? Springboot2.0以后默认的数据库连接池是哪个SpringBoot2.0后默认的数据库连接池是HikariCP。HikariCP是一个高性能的数据库连接池,它的性能远远超过其他传统的数据库连接池,如C3P0、DBCP和Tomcat的连接池。如果......
  • 自动化测试-RobotFramework环境准备(python基础)
    学习总结,有错误欢迎指出。总结:推荐为每个python相关项目创建独立的虚拟环境。1.虚拟环境安装虚拟环境:为每个项目提供独立的执行器和包管理。示例:使用python内置库venv模块,在项目根目录下创建虚拟环境。python-mvenv.venv-m:执行“位于搜索路径(sys.path)下......
  • JS基础知识总结(2)
    一、我们的HTML控件里面原本没有id,也不想去添加id,如何选择它呢?我们可以使用varx=document.getElementsByTagName("input");varheight=x[0].value;这条语句,括号里面的是我们控件的名称。他会选择我们所有的input控件,我们想要什么值,就直接从里头选就是了。这里需要......
  • 《0基础》学习Python——第十四讲__封装、继承、多态
    <封装、继承、多态>一、类和实例解析    1、面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法,但各自的数据可能不同。    2、用class类名......
  • java的基础
    Java的概述开元、共享、社区庞大的计算机语言java之父詹姆斯·高斯林java技术体系javaSEjavaEEjavaMEjava特性可移植、跨平台、强类型语言、安全java的应用领域网站以及后台手机领域金融项目物流系统桌面开发物联网项目服务器企业级开发大数据科学技术安卓......
  • 数据库理论基础
    1.什么是数据库1.1数据描述事物的符号记录,可以是数字、文字、图形、图像、声音、语言等,数据有多种形式,它们都可以经过数字化后存入计算机。1.2数据库存储数据的仓库,是长期存放在计算机内、有组织、可共享的大量数据的集合。数据库中的数据按照一定数据模型组织、描述和存......