React JavaScript扩展JSX用法详解 – ReactJS实战教程 reactjsx用法|React

上一章ReactJS实战教程请查看：ReactJS和Vue之间的区别
正如我们已经看到的，所有的React组件都有一个渲染函数render，render函数指定React组件的HTML输出。JSX(JavaScript扩展)是一个React扩展，它允许编写类似HTML的JavaScript代码。换句话说，JSX是React使用的类似html的语法，它扩展了ECMAScript，因此类似html的语法可以与JavaScript/React代码共存。语法由预处理程序使用(即将类似html的语法转换成JavaScript引擎将解析的标准JavaScript对象。
JSX提供了在编写JavaScript代码的同一个文件中编写类似HTML/ xml的结构(例如，类似dom的树结构)，然后预处理程序将这些表达式转换成实际的JavaScript代码。与XML/HTML一样，JSX标记也有标记名称、属性和子标记。
例子
在这里，我们将在JSX文件中编写JSX语法，并查看由预处理程序(babel)转换的相应JavaScript代码。
JSX文件

< div>Hello JavaTpoint< /div>

相应的输出

React.createElement("div", null, "Hello srcmini");

上面的代码行创建了一个react元素并在其中传递三个参数，第一个参数是元素的名称，即div，第二个参数是在div标记中传递的属性，最后一个参数是传递的内容，即“Hello srcmini”。
为什么使用JSX？

它比普通的JavaScript更快，因为它在将代码翻译成JavaScript时执行优化。
React使用包含标记和逻辑的组件，而不是通过将标记和逻辑放在单独的文件中来分隔技术，我们将在以后的小节中学习组件。
它是类型安全的，大多数错误可以在编译时发现。
更容易创建模板。

嵌套在JSX中的元素要使用多个元素，需要用一个容器元素包装它。这里，我们使用div作为容器元素，其中包含三个嵌套的元素。
App.JSX

import React, { Component } from 'react'; class App extends Component{ render(){ return( < div> < h1>srcmini< /h1> < h2>IT开发教程< /h2> < p>这个网站包含最好的CS教程.< /p> < /div> ); } } export default App;

JSX属性JSX对HTML元素使用与常规HTML相同的属性。JSX对属性使用camelcase命名约定，而不是HTML的标准命名约定，比如HTML中的类在JSX中变成了className，因为该类是JavaScript中的保留关键字。我们还可以在JSX中使用我们自己的自定义属性。对于自定义属性，我们需要使用数据前缀。在下面的示例中，我们使用自定义属性data-demoAttribute作为< p> 标记的属性。
例子

import React, { Component } from 'react'; class App extends Component{ render(){ return( < div> < h1>srcmini< /h1> < h2>IT开发教程网< /h2> < p data-demoAttribute = "demo">这个网站包含最好的CS教程.< /p> < /div> ); } } export default App;

在JSX中，我们可以通过两种方式来指定属性值：
1、使用字符串字面值：我们可以在双引号中指定属性的值:

var element = < h2 className = "firstAttribute">Hello srcmini< /h2>;

例子

import React, { Component } from 'react'; class App extends Component{ render(){ return( < div> < h1 className = "hello" >srcmini< /h1> < p data-demoAttribute = "demo">这个网站包含最好的CS教程< /p> < /div> ); } } export default App;

2、使用表达式: 我们可以使用花括号{}将属性值指定为表达式

var element = < h2 className = {varName}>Hello srcmini< /h2>;

例子

import React, { Component } from 'react'; class App extends Component{ render(){ return( < div> < h1 className = "hello" >{25+20}< /h1> < /div> ); } } export default App;

JSX注释JSX允许我们使用以/*开头，以*/结尾的注释，并将它们括在花括号{}中，就像在JSX表达式中一样。下面的示例展示了如何在JSX中使用注释。
例子

import React, { Component } from 'react'; class App extends Component{ render(){ return( < div> < h1 className = "hello" >Hello srcmini< /h1> {/* JSX这是一个注释 */} < /div> ); } } export default App;

JSX样式React总是建议使用内联样式。要设置内联样式，你需要使用驼峰拼写语法。React自动允许在特定元素的数值后面添加px。下面的示例演示如何在元素中使用样式。
【React JavaScript扩展JSX用法详解 – ReactJS实战教程】例子

import React, { Component } from 'react'; class App extends Component{ render(){ var myStyle = { fontSize: 80, fontFamily: 'Courier', color: '#003300' } return ( < div> < h1 style = {myStyle}>www.srcmini.com< /h1> < /div> ); } } export default App;

注意: JSX不允许使用if-else语句。你可以使用条件(三元)表达式来代替它。在下面的例子中可以看到。

import React, { Component } from 'react'; class App extends Component{ render(){ var i = 5; return ( < div> < h1>{i == 1 ? 'True!' : 'False!'}< /h1> < /div> ); } } export default App;