reactjs jsx语法规则
jsx语法规则:
1.定义虚拟DOM时,不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class,要用className。
4.内联样式,要用style={{key:value}}的形式去写。
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则:1.定义虚拟DOM时,不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class,要用className。4.内联样式,要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。(2).若大写字母开头,react就去渲染对应的组件,若组件没有定义,则报错。*/</script>
</body>
</html>
reactjs jsx语法规则相关推荐
- react总结之jsx是什么,jsx语法规则
文章目录 目录 一.jsx是什么? 二.jsx的优点 三.jsx语法规则 一.jsx是什么? jSX 代表 Javascript XML.它是 Javascript 和 Html 的融合.它是一种类似 ...
- 前端学习(3198):jsx语法规则2
- 前端学习(3197):jsx语法规则1
- React中jsx语法规则
1.定义虚拟DOM不要写引号,因为不是字符串 const VDOM1 = <h1>Hello,React</h1> const VDOM2 = ( /* 此处一定不要写引号,因 ...
- React中jsx的规则
jsx语法规则:1.定义虚拟DOM时,不要写引号.2.标签中混入JS表达式时要用{}.3.样式的类名指定不要用class,要用className.4.内联样式,要用style={{key:value} ...
- React 学习笔记:JSX 语法
JSX JSX 是 JavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码.它可以让我们在 React 中创建元素更加简单,并且保留 HTML 代码的结构更直 ...
- 【React】通过jsx语法创建虚拟DOM动态及数组赋值的方法(图文+代码)
jsx语法规则: 1.定义虚拟DOM时,不要写引号. 2.标签中混入JS表达式时要用{}. 3.样式的类名指定不要用class,要用className. 4.内联样式,要用style={{key:va ...
- 在Vue 中使用 JSX 语法
Vue 中构建虚拟DOM可以直接使用渲染函数构建虚拟Dom,正常情况下用render函数的参数createElement方法构建虚拟Dom的语法比较繁琐,更方便的是用更接近于模板的JSX语法. Vue ...
- React 简介 及 JSX语法
文章目录 React 简介 React 概述及特点 React 虚拟DOM React 渲染机制 React 基本使用 JSX 语法 createElement()方法深究 JSX语法规则 React ...
最新文章
- Java IO流学习总结三:缓冲流-BufferedInputStream、BufferedOutputStream
- c3074 无法使用带圆括号的_助力带分类简介
- linux 下C调用Python 模块
- 【我看Hibernate】Hibernate 介绍及其简单应用
- WinServer-FTP搭建
- OCS 2007 R2将前端加入到企业版池
- apache站点优化—数据压缩
- Windows xp 如何查看SID?
- Jmeter生成自动化和性能多维度测试报告(性能指标和监听器图表)
- Linux中expect命令实现交互,修改VNCPASSWD
- linux内核PID管理
- 速升级!SonicWall 3个已遭利用的严重0day 影响企业邮件安全设备
- 加点字符就能让qq昵称很酷的神奇代码?
- 2021年氧化工艺找解析及氧化工艺考试总结
- Google的设计原则
- java编程判断斐波那契数是质数
- 剑道第一仙 第一千六百三十七章 何须解释
- 写一函数,将两个字符串中的元音字母复制到另一个字符串,然后输出。
- 基于docker 部署 canvas-lms
- 为什么要劝退分子科学与工程?
热门文章
- svm加载数据集并预测
- 趣学python3(40)--TCP服务器和客户端(socketserver类)
- 【时间序列】基于一维卷积自动特征提取的短期用水需求量预测
- 【Python】刚刚,Python3.10 正式发布了!终于增加了这个功能...
- 【深度学习】搞懂 Vision Transformer 原理和代码,看这篇技术综述就够了
- 最常用的决策树算法(二)Random Forest、Adaboost、GBDT 算法
- RTC 融合通信服务架构与场景应用 | 2021稀土开发者大会音视频专场
- AI大神贾扬清确认将离开Facebook,加入阿里硅谷研究院
- jqueryeasyui datebox 设置默认值
- JavaScript正则替换去除字符串中特殊字符