ReactJS-JSX

---

正如我们之前了解到的，React JSX 是 JavaScript 的扩展。它使开发人员能够使用 XML 语法创建虚拟 DOM。它编译为纯 JavaScript（React.createElement 函数调用）。由于它编译为 JavaScript，因此可以在任何有效的 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 支持纯 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 using 表达式中使用。上述代码的输出如下：

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

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

功能

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 支持类似 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>