zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Eureka 服务的注册和发现
    springcloud 中文文档
    mysql 7 种 join
    通用 mapper
    docker 容器操作( 以 tomcat 为例 )
    linux下安装phpunit简单方法
    图片优化的几个小工具
    安装基准测试工具sysbench
    安装pcntl以实现php多进程
    安装memcache及php的memcached模块
  • 原文地址:https://www.cnblogs.com/wyongz/p/11124403.html
Copyright © 2011-2022 走看看