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>
        )
    }
...