React--JSX语法

 

JSX语法，它是js语言的语法拓展。

 

好比2+2 ， 对象.属性 ， 函数的调用均可以在jsx中书写。

 

import React from "react";

 

export default class MyCompo extends React.Component{

constructor(){

super();

} 

 

render(){

var xiaoming = {

name : "小明"

};

 

function fun(){

return <ul>

<li>牛奶</li>

<li>咖啡</li>

</ul>

}

 

return (

<div>

<h1>我买了{1+2}个苹果</h1>

<h1>{xiaoming.name}</h1>

<div>

{fun()}

</div>

</div>

);

}

}

 

注意一下，return的时候千万不要return空，因此要么在return的哪一行写标签的开始，要么用圆括号包裹：