Fork me on GitHub

Rax(2)-关于JSX

发表于 | 分类于
字数统计: 292 | 阅读时长 ≈ 1
Rax入门-JSX

介绍JSX

考虑这个变量的声明：

1
const element = <h1>Hello, world!</h1>

这种有趣的标签语法既不是一个字符串也不是html。
它叫JSX，是JavaScript扩展的语法。

在JSX中嵌入表达式

可以将任何JavaScript表达式放在大括号内嵌入进JSX。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function formatName(user) {
    return user.firstname + ' ' + user.lastname;
}
const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX也是一个表达式

编译之后，JSX表达式变成常规的JavaScript函数调用为对象。

这就意味着，你可以在if语句、for循环中使用JSX，可以把它分配给变量、让它成为参数传递、或者是函数的返回值。

1
2
3
4
5
6
function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX的含义

JSX只是JavaScript语法的一个语法映射。JSX表达式执行函数调用，我们可以看成他就是调用 createElement() 方法的快捷方式。 Babel 内置的支持 JSX 语法的编译。在代码中声明 @jsx可以定制相应的函数调用：

1
2
3
4
5
6
// Tell Babel to transform JSX into createElement() calls: 
/* @jsx createElement */
 
import { createElement } from 'rax';
 
<View /> // => createElement(View)

参考资料

learn-jsx

undefined