从零开始学React--JSX

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

所以JSX看起来像HTML，但是语法比HTML严格，比如只允许一个根节点，所有标签必须闭合，class属性要改成className等，参见使用 JSX 书写标签语言 -- React 中文文档

JSX最强大的地方是可以在HTML里面写js代码

在 JSX 中通过大括号使用 JavaScript

在jsx中，大括号包裹的就是js代码,里面可以使用变量，方法，对象，如果要使用注释可以使用 {/*使用js变量*/}这种方式

javascript 复制代码

function JSXTest() {
    let message = '这是一条消息'
    return (
        <div>
            {/*使用js变量*/}
            {message}<br/>
            {/*使用方法*/}
            {new Date().getDate()}
            <div style={{color: 'red'}}>这是js对象</div>
        </div>
    );
}

export default JSXTest;

列表渲染

列表渲染是项目中经常用到的技巧，比如我们从后台拿到商品数据，在前台渲染成一张表格等，react的列表渲染没有特别的语法，就是用的js数组里面的方法，比如将数据list变成li的集合，可以使用数组的map方法

<ul></ul>是jsx语法，在里面使用js要写大括号,在map的回调函数里面返回html代码，在js代码里面写html需要些小括号

javascript 复制代码

function JSXTest() {
    return (
        <ul>
            {list.map(item => {
                return (<li key={item.id}>{item.name}</li>)
            })}
        </ul>
    );
}

完整代码，因为只有一行代码，回调函数里面的大括号,return,小括号都可以省略

javascript 复制代码

let list = [
    {id: 1, name: 'Vue'},
    {id: 2, name: 'React'},
    {id: 3, name: 'Angular'}
]
function JSXTest() {
    return (
        <ul>
            {list.map(item=><li key={item.id}>{item.name}</li>)}
        </ul>
    );
}

export default JSXTest;

技巧:记住js里面写html需要用小括号包裹,html里面写js需要用大括号包裹(吐槽:看的头疼，还是习惯vue的写法)

条件渲染

条件渲染也是很常用的技巧，根据变量来显示隐藏组件,常用的有两种方式，逻辑与和三元运算

javascript 复制代码

let isLogin = true

function JSXTest() {
    return (
        <div>
            {isLogin && <span>login page</span>}<br/>
            {isLogin? <span>has Login</span> : <span>loading...</span>}
        </div>
    );
}

export default JSXTest;

复杂条件渲染

上面两种方式只能实现简单的条件渲染，要想实现复杂的效果可以使用方法

javascript 复制代码

function getArticleItem(type) {
    if(type == 0) {
        return <div>无图模式</div>
    } else if(type == 1) {
        return <div>单图模式</div>
    } else {
        return <div>双图模式</div>
    }
}
function JSXTest() {
    return (
        <div>
            {getArticleItem(0)}
            {getArticleItem(1)}
            {getArticleItem(2)}
        </div>
    );
}

export default JSXTest;