JSX就是Javascript和XML结合的一种格式。React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM,当遇到 < ,JSX就当做HTML解析,遇到 { 就当做javascript解析
JSX语法
<ul className="my-list"> <li>JSPang.com</li> <li>I love React</li> </ul>
JS代码
var child1 = React.createElement(‘li‘, null, ‘JSPang.com‘); var child2 = React.createElement(‘li‘, null, ‘I love React‘); var root = React.createElement(‘ul‘, { className: ‘my-list‘ }, child1, child2);
组件和JSX语法的区别:自定义的组件必须首写字母要进行大写,而JSX是小写字母开头的。
JSX中使用三元运算符
import React, { Component } from ‘react‘; class App extends Component { render() { return ( <div> Hello JSPang <ul className="my-list"> <li>{false ? ‘JSPang.com‘ : ‘技术胖‘}</li> <li>I love React</li> </ul> </div> ); } } export default App;