当前位置: 首页 > news >正文

JSX语法基础总结

题记:首先我们要了解一下jsx是什么,跟js有什么区别,其实就是js的语法糖,加上了xml的语法,使得产生虚拟dom更加的方便,简单说一下,xml就是存储数据的格式,想了解xml的话,可以结合json格式相互对比。

举例:

//用js去写let Dom = React.creatElemnt('h1',{id:'header'},'你好啊');
let Doms = React.creatElemnt('h1',{id:'header'},React.craetElement('span',{id:'center'},"你好啊")//用jsX写
let Dom = (<h1 id='title'>你好</h1>
)let Doms = (<h1 id='title'><span>你好</span></h1>
)

jsx语法规则:

01.定义时无序引号。

let Doms = (<h1 id='title'><span>你好</span></h1>
)

02.标签中混入表达式用{}包裹。

      注:表达式跟代码语句不一样的欧,也就是说if语句,for语句不能被{}包裹;函数和变量是表达式,for和if叫做代码语句。

let name = 'title'
let commins = '你好'let Doms = (<h1 id={title}><span>{commins}</span></h1>
)
let name = 'title'
let commins = '你好'
let arr = ['a','b','c]
let Doms = (<div id={title}><span>{Array.map((item,index)=>{return <li key={index}>{item}</li>      )}</span></div>
)

 

03.样式的类型指定不用class,用className;

let name = 'title'
let commins = '你好'
let niu = 'niuniu'
let Doms = (<h1 id={title} className={niu}><span>{commins}</span></h1>
)

04.行内样式一样要加上{{}};

let name = 'title'
let commins = '你好'let Doms = (<h1 id={title}><span style={{margin:20px}}>{commins}</span></h1>
)

05.根标签只有一个,跟Vue2一样;

06.标签必须闭合;

07.标签首字母

        1.若小写字母开头,将转为html标签;

        2.若大写字母开头,则会找相应的组件,如果没有这样的组件报错,结合Vue组件命名规范;

http://www.lryc.cn/news/110569.html

相关文章:

  • socker套接字
  • No111.精选前端面试题,享受每天的挑战和学习
  • 【Apollo学习笔记】—— 相机仿真
  • 【数据结构】——线性表的相关习题
  • SpringBoot集成Elasticsearch8.x(8)|(新版本Java API Client的Painless语言脚本script使用)
  • SpringBoot复习:(19)Condition接口和@Conditional注解
  • K8s中的Controller
  • 【MFC】03.常用复杂控件的使用-笔记
  • Autosar诊断实战系列14-NRC优先级解析
  • 《向量数据库指南》——腾讯云向量数据库Tencent Cloud VectorDB产品特性,架构和应用场景
  • xcode 的app工程与ffmpeg 4.4版本的静态库联调,ffmpeg内下的断点无法暂停。
  • 机器学习06 数据准备-(利用 scikit-learn基于Pima Indian数据集作 数据特征选定)
  • 机器学习-特征选择:如何使用Lassco回归精确选择最佳特征?
  • SpringBoot之Actuator基本使用
  • 排序算法(一)
  • Centos虚拟机忘记密码-修改密码
  • Shell 分析服务器日志常用命令
  • mysql8配置binlog日志skip-log-bin,开启、关闭binlog,清理binlog日志文件
  • 机器学习:训练集与测试集分割train_test_split
  • 淘宝API开发(一)简单介绍淘宝API功能接口作用
  • Redis相关面试题
  • 数据库简介
  • 腾讯云国际轻量应用服务器怎么使用呢?
  • arm环境cloudstack在vpc下创建虚拟机失败
  • Linux上安装Keepalived,多台Nginx配置Keepalived(保姆级教程)
  • centos7 ‘xxx‘ is not in the sudoers file...
  • Zebec Payroll :计划推出 WageLink On-Demand Pay,进军薪酬发放领域
  • 【2023】字节跳动 10 日心动计划——第三关
  • 【无网络】win10更新后无法联网,有线无线都无法连接,且打开网络与Internet闪退
  • HTML <script> 标签