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 loops） 中使用 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 using 表达式。上述代码的输出如下：

在 JSX 中使用 expression 的一个积极副作用是它可以防止注入攻击，因为它将任何字符串转换为 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（） 用于获取当前时间，输出类似于下面指定的 -

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>

输出

输出如下：

在属性中使用表达式

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>