React 之 JSX

什么是JSX ?

    即JavaScript XML ，基于JavaScript 融合了XML,我们可以在js中书写XML， 是一种标记语言,可以自定义属性，具有可扩展性。在react中如果想向页面输出一个标签，必须用到react内置的JSX语法，否则输出的只是普通的字符串。

使用注意

    必须引用babel.js文件解析JSX, script标签中添加 type="text/babel" 属性。加了这个属性，浏览器就不会解析这里边的代码，但babel可以解析，然后交给浏览器执行。

<script type="text/babel">

JSX语法

    1，可以在JS中书写XML(HTML)

    2，每个解构中只能有且仅有一个顶层元素

    3，可以包含子节点

    4，支持插值表达式

插值表达式

    类似ES6的模板字符串，可以在差值表达式中书写表达式，但是不能书写语句（for循环等）。

    差值表达式语法： { 表达式 } 用花括号包括里边的表达式。

    在插值表达式中可以书写的数据类型：

    1，字符串 和 数字 可以被输出

    2，布尔值 null undefined 会被输出为空字符串（不会报错）

    3, 对象在react差值表达式不能被输出，并会报错。

        但是可以输出一个数组，会转成字符串。

JSX标签添加属性

    基本使用和xml/html类似，格式 属性名 = 属性值，值用双引号包括。

    属性值支持插值表达式，

添加属性注意点

class属性需要改为className

<div>
  <h1 className="title">{this.props.data.name}</h1>
  <List data={this.props.data.list}/>
</div>

style属性的值必须使用对象描述，

<li style={ {background:"#ccc"} } key={index}>
   <p>{item.username}</p>
   <p>{item.message}</p>
</li>