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

上一章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。下面的示例演示如何在元素中使用样式。

例子

import React, { Component } from 'react';  
class App extends Component{  
   render(){  
     var myStyle = {  
         fontSize: 80,  
         fontFamily: 'Courier',  
         color: '#003300'  
      }  
      return (  
         <div>  
            <h1 style = {myStyle}>www.srcmini02.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;