1.JSX函数与render函数
class App extends Component {
const hello="hello jsx";
render() {
return (
<div className="app">
<h1>Todos</h1>
<h2>running</h2>
<h2>{hello}</h2>
</div>
)}}
上面代码就是JSX语法,由render作为它的入口函数,并且最外围的容器是唯一的。在15.x版本以下render函数只能包含一个容器。其他所有的结构都放在<div>中。
在JSX中访问变量,需要加大括号,如访问hello变量。
在JSX中插入JavaScript表达式也一样,直接在JSX中将JS表达式用大括号括起来即可
{this.handleKeyUp.bind(this)}
JSX 的基本语法规则:遇到 HTML 标签(以 <
开头),就用 HTML 规则解析;遇到代码块(以 {
开头),就用 JavaScript 规则解析。
JSX的编译过程:有如下JSX语法
<div className=