JSX语法规则

标签：DOM 标签 渲染 语法 虚拟 规则 document JSX VDOM

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

　　创建虚拟DOM：

　　　　const VDOM=(

　　　　　　<h2 id="atguigu" >Hello React!</h2>

　　　　)

　　渲染虚拟DOM到页面

　　　　ReactDOM.Render(VDOM,document.getElementById("test"))//参数1VDOM是虚拟DOM，参数２，document部分是要渲染的位置

2.标签种混入JS表达式时要使用{}

　　　　Const myId = "atguigu"

　　　　Const myDate = "Hello,Reavt"

　　　　

　　　　创建虚拟DOM：

　　　　const VDOM=(

　　　　　　<h2 id={myId} >　　　　　　

　　　　　　<span>{myDate}</span>

　　　　　　</h2>

　　　　)

　　　　渲染虚拟DOM到页面

　　　　ReactDOM.Render(VDOM,document.getElementById("test"))//参数1VDOM是虚拟DOM，参数２，document部分是要渲染的位置

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

　　　　<style>

　　　　　　.title{

　　　　　　　　background: orange;

　　　　　　　　width: 300px

　　　　　　}

　　　　</style>

　　　　

　　　　创建虚拟DOM：

　　　　

　　　　const VDOM=(

　　　　　　<h2 id={myId} >　　　　　　

　　　　　　<span>{myDate}</span>

　　　　　　</h2>

　　　　)

　　　　渲染虚拟DOM到页面

　　　　ReactDOM.Render(VDOM,document.getElementById("test"))

4.内脸样式要使用style = {{key:value}}的方式去写

5.只有一个根标签

6.标签必须闭合

7.标签首字母

　　小写开头：则将该标签转为HTML同名元素，若无该标签对应的同名元素，则报错

　　大写开头：React会去渲染对应的组件，若组件未定义，则报错

　　　　

　　　　

 

样式的类名指定

标签：DOM,标签,渲染,语法,虚拟,规则,document,JSX,VDOM
From： https://www.cnblogs.com/ynnotes/p/16778869.html