zoukankan      html  css  js  c++  java
  • React渲染和事件处理

    一、列表渲染

    ①在列表中,绑定数组成员会直接把成员渲染

        <div id="app"></div>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script type="text/babel">
            const fruits =[
                <li key='one'>apple</li>,
                <li key='two'>orange</li>,
                <li key='three'>banana</li>,
            ]
            const element = (
                <div>
                    <ul>{fruits}</ul>
                </div>
            )
            ReactDOM.render(element,document.getElementById('app'))
        </script>

    ②当数组成员是对象时,可以直接在标签中生成一个数组

        <div id="app"></div>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script type="text/babel">
            const todos = [
                {id:1,name:'eric'},
                {id:2,name:'marry'},
                {id:3,name:'jack'},
                {id:4,name:'lisa'},
            ]
            
            const element = (
                <div>
                    <ul>
                        {
                            todos.map(item => {
                                return <li key={item.id}>{item.name}</li>
                            })
                        }
                    </ul>
                </div>
            )
            ReactDOM.render(element,document.getElementById('app'))
        </script>

    二、条件渲染

        <div id="app"></div>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script type="text/babel">
            const user ={
                name:'eric',
            }
            function getHi(user) {
                if (user) {
                    return <h1>hello {user.name}</h1>
                }
                return <h1>hello world</h1>
            }
            const element = getHi(user)
            //const element = getHi()
            ReactDOM.render(element,document.getElementById('app'))
        </script>

    三、事件处理

        <div id="app"></div>
        <script src="node_modules/@babel/standalone/babel.js"></script>
        <script src="node_modules/react/umd/react.development.js"></script>
        <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
        <script type="text/babel">
            function handleClick() {
                window.alert('hello')
            }
            // 事件使用驼峰命名
            // 必须绑定一个函数,行数体不能写在行内,也可以直接绑定一个匿名函数
            // 不能使用字符串的方式,一定要用{函数}来绑定
            const element = (
                <div>
                    <button onClick={handleClick}>点击1</button>
                    <button onClick={()=>{alert('world')}}>点击2</button>
                </div>
            )
    
            ReactDOM.render(element,document.getElementById('app'))
        </script>

  • 相关阅读:
    Maven打包时过滤测试代码或指定特定的测试类(maven-surefire-plugin)
    Maven项目配置外部依赖(本地依赖)
    手把手教你创建「人物角色Persona」
    微服务与Docker介绍
    深入学习微框架:Spring Boot
    技术干货:我们的项目是如何技术选型的
    为什么选择Spring Boot作为微服务的入门级微框架
    Android Material Design 兼容库的使用详解
    Android 实现QQ、微信、新浪微博和百度第三方登录
    Android ijkplayer详解使用教程
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9434475.html
Copyright © 2011-2022 走看看