ReactJS – JSX语法

Posted on by

正如我们之前所了解的，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 标记及其属性。必须使用 camelCase 约定（并且它遵循 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>

推荐阅读：