📌  相关文章
📜  ReactJS JSX

📅  最后修改于: 2020-12-19 03:49:53             🧑  作者: Mango

React JSX

正如我们已经看到的那样，所有React组件都有一个render函数。 render函数指定React组件的HTML输出。 JSX(JavaScript扩展)是一个React扩展，它允许编写类似于HTML的JavaScript代码。换句话说，JSX是React使用的类似HTML的语法，它扩展了ECMAScript，因此类似HTML的语法可以与JavaScript / React代码共存。预处理程序(即像babel这样的编译器)使用该语法将类似HTML的语法转换为JavaScript引擎将解析的标准JavaScript对象。

JSX使您可以在编写JavaScript代码的同一文件中编写类似HTML / XML的结构(例如，类似DOM的树结构)，然后预处理器会将这些表达式转换为实际的JavaScript代码。就像XML / HTML一样，JSX标记具有标记名称，属性和子代。

例

在这里，我们将在JSX文件中编写JSX语法，并查看由preprocessor(babel)转换的相应JavaScript代码。

JSX文件

Hello JavaTpoint

对应输出

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

上一行创建了一个react元素，并在其中传递了三个参数，第一个是div元素的名称，第二个是div标记中传递的属性，最后一个是您传递的内容，即“ Hello JavaTpoint”。

为什么要使用JSX?

  • 它比常规JavaScript更快，因为它在将代码转换为JavaScript时执行优化。
  • 与使用标记和逻辑放在单独的文件中来分离技术不同，React使用包含两者的组件。我们将在下一节中学习组件。
  • 它是类型安全的，大多数错误都可以在编译时发现。
  • 它使创建模板更加容易。

JSX中的嵌套元素

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

App.JSX

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         

            
JavaTpoint

          
Training Institutes

            
This website contains the best CS tutorials.

         

      );
   }
}
export default App;

输出：

JSX属性

JSX使用的属性与常规HTML相同。 JSX将驼峰命名约定用于属性，而不是HTML的标准命名约定，例如HTML中的类在JSX中成为className ，因为该类是JavaScript中的保留关键字。我们还可以在JSX中使用我们自己的自定义属性。对于自定义属性，我们需要使用data- prefix 。在下面的示例中，我们使用了自定义属性data-demoAttribute作为

标记的属性。

例

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         

             
JavaTpoint

           
Training Institutes

             
This website contains the best CS tutorials.

         

      );
   }
}
export default App;

在JSX中，我们可以通过两种方式指定属性值：

1.作为String 字面量：我们可以在双引号中指定属性的值：

var element = 
Hello JavaTpoint
;

例

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         

            
JavaTpoint

            
This website contains the best CS tutorials.

         

      );
   }
}
export default App;

输出：

JavaTpoint
This website contains the best CS tutorials.

2.作为表达式：我们可以使用大括号{}将属性的值指定为表达式：

var element = 
Hello JavaTpoint
;

例

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         

            
{25+20}

         

      );
   }
}
export default App;

输出：

45

JSX评论

JSX允许我们使用以/ *开头和以* /结束的注释，并将其包装在大括号{}中，就像JSX表达式一样。下面的示例显示了如何在JSX中使用注释。

例

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         

            
Hello JavaTpoint

        {/* This is a comment in JSX */} 
         

      );
   }
}
export default App;

JSX样式

React总是建议使用内联样式。要设置内联样式，您需要使用camelCase语法。 React自动允许在特定元素的数字值后附加px。以下示例显示如何在元素中使用样式。

例

import React, { Component } from 'react';
class App extends Component{
   render(){
     var myStyle = {
         fontSize: 80,
         fontFamily: 'Courier',
         color: '#003300'
      }
      return (
         

            
www.javatpoint.com

         

      );
   }
}
export default App;

输出：


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

例

import React, { Component } from 'react';
class App extends Component{
   render(){
      var i = 5;
      return (
         

            
{i == 1 ? 'True!' : 'False!'}

         

      );
   }
}
export default App;

输出：

False!