React教程(二)——jsx语法、条件渲染、列表渲染

66 阅读 0 评论 44 点赞

我是靠谱客的博主狂野小伙，最近开发中收集的这篇文章主要介绍React教程(二)——jsx语法、条件渲染、列表渲染，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、JSX 语法

在react中，就是使用jsx的语法，来实现DOM元素的展示。一个基本的jsx语法的react模板如下：

<div>{this.props.title}</div>

这种方式的本质是：在html中嵌入js表达式！！

那到底编译器如何对jsx语法进行编译的呢？规则就是这样的：遇到以“<”开头以“>”结尾就按照HTML的语法来解析，遇到“{”开头以“}”结尾的按照JavaScript表达式来解析。

JSX语法能够解析表达式（基本运算操作、三目运算符、数组等）

基本运算的示例

可以输出基本的加减乘除。

var Hello = React.createClass({
   render: function () {
        return (
            <h1>
                hello world!
                { 1+1 }
            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

三木运算的示例

下面的isShow展示为true或者false展示不同的页面。

var Hello = React.createClass({
    getInitialState: function () {
        return {
            isShow: true
        }
    },
    render: function () {
        return (
            <h1>
                hello world!
                { this.state.isShow ? <span>123</span>:<span>456</span> }
            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

数组的解析

JSX可以解析数组，返回DOM元素。

var Hello = React.createClass({
    render: function () {
        return (
            <h1>
                hello world!
                <ul>
                    { [<li>123</li>,<li>123</li>,<li>123</li>] }
                </ul>

            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

2、条件渲染

在react中条件渲染是使用三木运算符的方式进行的。

var Hello = React.createClass({
    getInitialState: function () {
        return {
            like: true
        }
    },
    click: function () {
        this.setState({
            like: !this.state.like
        })
    },
    render: function () {
        return (
            <h1>
                hello world!

                { this.state.like?<span>I like you!</span>:<span>I dislike you!</span> }

                <button onClick={this.click}>change</button>
            </h1>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))

在本示例中，使用click函数，改变state的状态，根据改变状态，从而展示不同的东西。

3、列表渲染

由于在react中，jsx能够把数组解析出来，所以从实现上来说，列表渲染一般我们使用map方法来实现DOM渲染。

var Hello = React.createClass({
    getInitialState: function () {
        return {
            arr: ['mapbar_front','liwudi','我是中国人']
        }
    },
    render: function () {
        return (
            <ul>
                { this.state.arr.map((item,index) => {
                    return (
                            <li key={index}>{item}</li>
                    )
                })}
            </ul>
        )
    }
})
ReactDOM.render(<Hello />,document.getElementById('root'))