react学习记录（二）

JSX

在render中return标签的部分可以插入字符串，数字，数组

class Welcome extends React.Component {
    render(){
        return (
        <div>
            <h1>welcome to react</h1>
            {'string'}<br />
            {123}<br />
            {[1,2,3,4]}
        </div>
        )}
}

显示效果如下：

列表渲染

class Welcome extends React.Component {
    render(){
        let arr = ['第一个','第二个','第三个']
        return (
        <div>
            <h1>welcome to react</h1>
            <ul>
            {
                arr.map(item=>
                    <li>{item}</li>
                )
            }
            </ul>
        </div>
        )}
}

显示效果：

条件渲染：

class Welcome extends React.Component {
    render(){
        let islogin = false
        return (
        <div>
            <h1>welcome to react</h1>
            {islogin?<p>欢迎回来</p>:<p>请先登录</p>}
        </div>
        )}
}

当islogin为true是显示的欢迎回来，当islogin为false时显示的请先登录

需要注意的是：jsx中的class类名是保留字，在使用class的时候要使用className替换

for要使用htmlFor替换

自定义组件首字母要大写用来区分是自定义标签还是自带标签

Jsx是一种语法糖，替代React.createElement()

返回的是ReactElement对象，直接使用对象的形式也可以，但是比较繁琐，所以使用JSX