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>

输出

此处，JSX 使用表达式中使用了 cTime。上述代码的输出如下，

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 标签及其属性均受支持。属性必须使用 camelCase 约定(并且遵循 JavaScript DOM API)而不是普通的 HTML 属性名称来指定。例如，HTML 中的类属性必须定义为 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>