JSX - React 笔记

JSX

JSX(js xml)是React中的语法糖

例子

1
2
3
4
5
6
7
8
9
10
class A extends React.Componet {
render() {
return (
<div className="app">
This is JSX
</div>
)
}
}
...

JSX本身其实也是一种表达式:

在编译之后呢,JSX 其实会被转化为普通的 JavaScript 对象。
意味着可以把它赋值给变量,当做函数传入和返回值

1
2
3
4
5
6
7
8
9
10
...
var a = <div>exp</div>;
render() {
return (
<div className="app">
{a}
</div>
)
}
...

在JSX使用表达式需要在{}花扣号内中写:

1
2
3
4
5
6
7
8
9
10
...
render() {
var isTrue = true;
return (
<div className="app" title={this.props.title}>
{isTrue && <div>show div</div>} // 短路操作
</div>
)
}
...