JSX 全称 JavaScript XML，是React 定义的一种类似于 XML 的 JS 扩展语法：JS + XML 本质是 React.createElement(component, props, ...children) 方法的语法糖。用于简化创建虚拟 DOM，写法：var ele = <h1>Hello JSX!</h1>。注意，它不是字符串，也不是 HTML/XML 标签。它最终产生的是一个 JS 对象。

基本语法规则

定义虚拟 DOM 时，不要写引号

JSX 采用下面的方式创建虚拟 DOM

//1. 创建虚拟DOM
const VDOM = (<h2 id='atguigu'><span>hello,react</span>   </h2>
)

标签中混入 JS 表达式要用 {}

     const myId = 'aTgUiGu'const myData = 'Hello,rEaCt' //1. 创建虚拟DOMconst VDOM = (<h2 id={myId.toLowerCase()}><span>{myData.toLowerCase()}</span></h2>)

样式的类名指定不要用class，要用className

     const myId = 'aTgUiGu'const myData = 'Hello,rEaCt' //1. 创建虚拟DOMconst VDOM = (<h2 className="title" id={myId.toLowerCase()}><span>{myData.toLowerCase()}</span></h2>)

内联样式，要使用style={{key:value}}的样式

     const myId = 'aTgUiGu'const myData = 'Hello,rEaCt' //1. 创建虚拟DOMconst VDOM = (<h2 className="title" id={myId.toLowerCase()}><span style={{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span></h2>)

只能有一个根标签

如果我们复制一下上面的 <h2>，会报错，这是因为只能有一个根标签，所以添加一个 <div> 将两个 <h2> 包起来。

     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></div>)

标签必须闭合

如果我们添加一个文本输入框，如果写成 <input type="text"> 会报错，这是因为，JSX 里的标签必须闭合，所以，应该写成 <input type="text"/>。

        const myId = 'aTgUiGu'const myData = 'Hello,rEaCt' //1. 创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white', fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)

标签首字母

若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
若大写字母开头，react将去渲染对应的组件，若组件没有定义，则报错。

JSX 基本语法规则相关推荐

4、JSX 基本语法规则
JSX 基本语法规则上一篇博文稍微说了一下虚拟DOM 和真实DOM 的区别,这一篇我们稍微说一下 jsx 的一些语法规则,这个是在开发中经常遇到的,今天稍微过一下. 什么是 JSX JSX 全称 ...
03-JSX的语法规则
JSX的语法规则 JSX是React为了方便创建虚拟DOM创建的一门新语言,语法类似于HTML,但是稍有区别. 1. JSX基本信息 JSX全称JavaScript XML,一种类似于XML的JS扩展 ...
reactjs jsx语法规则
jsx语法规则: 1.定义虚拟DOM时,不要写引号. 2.标签中混入JS表达式时要用{}. 3.样式的类名指定不要用class,要用className. 4.内联样式,要用style={{key:va ...
react总结之jsx是什么，jsx语法规则
文章目录目录一.jsx是什么? 二.jsx的优点三.jsx语法规则一.jsx是什么? jSX 代表 Javascript XML.它是 Javascript 和 Html 的融合.它是一种类似 ...
从零开始React：一档 React环境搭建，语法规则，基础使用
手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先 ...
LLVM一些语法规则
LLVM一些语法规则 LLVM文档 LLVM编译器基础架构支持广泛的项目,从工业强度编译器到专门的JIT应用程序,再到小型研究项目. 同样,文档分为几个针对不同受众的高级别分组: LLVM设计概述几 ...
一文详解CMakeLists文件编写语法规则详解
作者丨zhanghm1995@blog 来源丨https://blog.csdn.net/zhanghm1995/article/details/80902807 编辑丨3D视觉工坊基本语法规则 C ...
xml语法规则（一）
一.XML语法规则 XML的文档和HTML的原代码类似,也是用标识来标识内容.创建XML文档必须遵守下列重要规则: 规则1:必须有XML声明语句这一点我们在上一章学习时已经提到过.声明是XML文档的 ...
【Groovy】Groovy 代码创建 ( 使用 Java 语法实现 Groovy 类和主函数并运行 | 按照 Groovy 语法改造上述 Java 语法规则代码 )
文章目录一.创建 Groovy 代码文件二.使用 Java 语法实现 Groovy 类和主函数并运行三.按照 Groovy 语法改造上述 Java 语法规则代码一.创建 Groovy 代码文件 ...

JSX 基本语法规则

基本语法规则

定义虚拟 DOM 时，不要写引号

标签中混入 JS 表达式要用 {}

样式的类名指定不要用class，要用className

内联样式，要使用style={{key:value}}的样式

只能有一个根标签

标签必须闭合

标签首字母

JSX 基本语法规则相关推荐

最新文章

热门文章