jsx基本语法

本文主要是介绍jsx基本语法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JSX语法规则

1、定义虚拟DOM，不要写引号，因为不是字符串；
2、标签中混入js表达式要使用 { }

const myId ='aTgUiGu'
const myData ='HeLlo,rEact'
//1.创建虚拟DOM
const VDOM =(
<h2 id={myId.toLowerCase()}><span>{myData.toLowerCase()}</span>
</h2>
//2.渲染虚拟DOM到页面
ReactDoM.render(VDOM,document.getElementById('test'))

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

const myId ='aTgUiGu'
const myData ='HeLlo,rEact'
//1.创建虚拟DOM
const VDOM =(
<h2 className="title" id={myId.toLowerCase()}><span>{myData.toLowerCase()}</span>
</h2>
//2.渲染虚拟DOM到页面
ReactDoM.render(VDOM,document.getElementById('test'))

4、内联样式要使用{{ key: value }}，外层的{} 代表内部要写js表达式了， 内部的{} 代表是一个对象

const myId ='aTgUiGu'
const myData ='HeLlo,rEact'
//1.创建虚拟DOM
const VDOM =(
<h2 className="title" id={myId.toLowerCase()}><span style="{{color:'#fff', fontSize:'16px'}}">{myData.toLowerCase()}</span>
</h2>
//2.渲染虚拟DOM到页面
ReactDoM.render(VDOM,document.getElementById('test'))

5、只有一个跟标签
6、标签必须闭合
7、标签首字母

• 如果首字母小写，就会被转成html元素，如果html没有对应的同名元素，就会报错。
• 首字母大写，react就回去渲染对应组件，如果没有组件，若组件没有定义则报错。

这篇关于jsx基本语法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---