ReactJS - JSX

正如我们之前学到的，React JSX 是 JavaScript 的一个扩展。它允许编写看起来像 HTML 代码的 JavaScript 代码。例如，请考虑以下代码

const element = <h1>Hello React!</h1>

上面代码中提供的标签被称为 JSX。JSX 主要用于提供有关界面外观的信息。但是，它并非完全是一种模板语言，而是 JavaScript 的语法扩展。JSX 生成呈现到 DOM 中的元素，以便指定输出的外观。

在 ReactJS 中使用 JSX

JSX 使开发人员能够使用 XML 语法创建虚拟 DOM。它编译成纯 JavaScript（React.createElement 函数调用），因此它可以在任何有效的 JavaScript 代码中使用。

分配给变量。

var greeting = <h1>Hello React!</h1>

基于条件分配给变量。

var canGreet = true; 
if(canGreet) { 
   greeting = <h1>Hello React!</h1> 
}

可以用作函数的返回值。

function Greeting() { 
   return <h1>Hello React!</h1> 
   
} 
greeting = Greeting()

可以用作函数的参数。

function Greet(message) { 
   ReactDOM.render(message, document.getElementById('react-app') 
} 
Greet(<h1>Hello React!</h1>)

为什么使用 JSX？

在 React 中使用 JSX 不是强制性的，因为有各种方法可以实现与 JSX 相同的功能；但它作为在 JavaScript 代码中处理 UI 时的视觉辅助工具很有帮助。

JSX 在将代码转换为 JavaScript 时执行优化，使其比常规 JavaScript 更快。
React 使用包含标记和逻辑的组件在一个文件中，而不是在单独的文件中。
由于数据流是单向的，因此大多数错误可以在编译时发现。
使用 JSX 可以更轻松地创建模板。
我们可以在条件语句（if-else）和循环语句（for 循环）中使用 JSX，可以将其分配给变量，作为参数接收，或从函数中返回。
使用 JSX 可以防止跨站点脚本攻击或注入攻击。

JSX 中的表达式

JSX 支持纯 JavaScript 语法的表达式。表达式必须用花括号{ }括起来。表达式可以包含上下文中所有可用的变量，其中定义了 JSX。让我们创建一个带有表达式的简单 JSX。

示例

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') );
</script>

输出

这里，cTime 使用表达式在 JSX 中使用。以上代码的输出如下所示：

The Current time is 21:19:56 GMT+0530(India Standard Time)

使用 JSX 中的表达式的积极副作用之一是它可以防止注入攻击，因为它将任何字符串转换为 html 安全字符串。

JSX 中的函数

JSX 支持用户定义的 JavaScript 函数。函数的使用类似于表达式。让我们创建一个简单的函数并在 JSX 中使用它。

示例

<script type="text/babel">
   var cTime = new Date().toTimeString();
   ReactDOM.render(
      <div><p>The current time is {cTime}</p></div>, 
      document.getElementById('react-app') 
   );
</script>

输出

这里，getCurrentTime() 用于获取当前时间，输出类似于以下所示：

The Current time is 21:19:56 GMT+0530(India Standard Time)

JSX 中的属性

JSX 支持类似 HTML 的属性。所有 HTML 标签及其属性都受支持。属性必须使用驼峰命名法（并遵循 JavaScript DOM API）而不是普通的 HTML 属性名称来指定。例如，HTML 中的 class 属性必须定义为className。以下是一些其他示例：

htmlFor 代替 for
tabIndex 代替 tabindex
onClick 代替 onclick

示例

<style>
   .red { color: red }
</style>
<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   ReactDOM.render(
      <div>
         <p>The current time is <span className="red">{getCurrentTime()}</span></p>
      </div>,
      document.getElementById('react-app') 
   );
</script>

输出

输出如下所示：

The Current time is 22:36:55 GMT+0530(India Standard Time)

在属性中使用表达式

JSX 支持在属性内部指定表达式。在属性中，不应与表达式一起使用双引号。必须使用表达式或使用双引号的字符串。上面的示例可以更改为在属性中使用表达式。

<style>
   .red { color: red }
</style>

<script type="text/babel">
   function getCurrentTime() {
      return new Date().toTimeString();
   }
   var class_name = "red";
   ReactDOM.render(
      <div>
         <p>The current time is <span className={class_name}>{getCurrentTime()}</span></p>
      </div>, 
      document.getElementById('react-app') 
   );
</script>

JSX 中的嵌套元素

JSX 中的嵌套元素可以用作 JSX 子元素。它们在显示嵌套组件时非常有用。您可以将任何类型的元素组合在一起，包括标签、文字、函数、表达式等。但是 false、null、undefined 和 true 都是 JSX 的有效元素；它们只是不呈现，因为这些 JSX 表达式最终都会呈现为相同的内容。在这种情况下，JSX 类似于 HTML。

以下是一段简单的代码，用于演示 JSX 中嵌套元素的使用：

<div>
   This is a list:
   <ul>
      <li>Element 1</li>
      <li>Element 2</li>
   </ul>
</div>

打印页面