Question

const element = <p>Hello, world!</p>;

这种类似于 HTML 标签的语法被称为 JSX。JSX 是一种 JavaScript 的语法扩展，在 Rax 中 我们使用 JSX 来描述页面结构。下面简单介绍 JSX 的基本使用方法。

JSX 声明

JSX 的声明方式和普通 HTML 标签一样，用 <> 标签包裹，也可以嵌套:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

假如标签内没有子元素，可以使用 /> 来闭合标签：

const element = <img src="url" />

在 JSX 中使用表达式

JSX 中可以插入任意 JavaScript 表达式。JSX中的表达式必须写在大括号 {} 中：

const element = <h1>{'Hello' + ',' + 'world!'}</h1>;

表达式中不能使用 if else 语句，但可以使用三元运算符 a b : c 来实现条件选择。

const element = <h1>{true 'True!' : 'False!'}</h1>

使用 JSX 数组

可以在一个 JSX 元素中直接嵌套包含多个元素的数组，数组内的 JSX 元素会被逐个渲染：

const arr = [
  <span>Hello, world!</span>,
  <span>Hello, Rax！</span>,
];
const element = <p>{arr}</p>;

在 JSX 中注释

JSX 注释和表达式一样，必须写在大括号 {} 中：

const element = <p>{/*注释...*/} Hello, world!</p>;

更多

了解更多 JSX 语法知识，可以参考以下链接：

• Introducing JSX

• JSX In Depth