React jsx语法规则

React jsx语法规则

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

const VDom = (
	<div>
    	<span>123</span>
    </div>
)

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

const num = 1
const VDom = (
	<div>
        {num}
    </div>
)

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

const VDom = (
	<div className="title"></div>
)

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

const VDom = (
	<div style={{color:'red',fontsize:'25px'}}></div>
)

只能有一个根标签

const VDom = (
	<div>
    	<div></div>
    </div>
)

这样是正确的写法

const VDom = (
	<div></div>
    <div></div>
)

这样的写法是不被允许的

标签必须闭合

在使用<input>等可以自闭合的标签的时候需要注意

const VDom = (
	<input></input>
)

const VDom = (
	<input/>
)

标签首字母

• 若以小写字母开头，则将该标签为html中同名元素，若html中无该标签对应得同名元素，则报错

const VDom = (
	<div>
    	<good></good>
    </div>
)

• 若大写字母开头，react就会去渲染对应的组件，若组件没有定义，则报错

const VDom = (
	<div>
    	<Good></Good>
    </div>
)

选渲染数据

ReactDOM.render(VDom,document.querySelector('#test'))