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

  • 相关阅读:
    Unity中的Path对应各平台中的Path
    C#里的装箱、装箱和值类型、引用类型
    unity3D自适应分辨率
    python中的-m参数
    手动安装python包
    python生成器
    HDU 1312 Red and Black(bfs)
    HDU 2553 N皇后问题(dfs)
    HDU1043 Eight(BFS)
    UVa230 Borrowers (STL)
  • 原文地址:https://www.cnblogs.com/wyongz/p/11124403.html
Copyright © 2011-2022 走看看