<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Learn React</title>

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>

    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>

    <!-- 生产环境中不建议使用 -->

    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

</head>

<body>

<div id="root"></div>

<script type="text/babel">

    function FancyBorder(props){

        return (

            <div className={'FancyBorder FancyBorder-' + props.color}>

                {props.children}

            </div>

        );

    }

    function Dialog(props){

        return(

            <FancyBorder color="blue">

                <h1 className="Dialog-title">

                    {props.title}

                </h1>

                <p className="Dialog-message">

                    {props.message}

                </p>

                    {props.children}

            </FancyBorder>

        )

    }

    class SigUpDialog extends React.Component{

        constructor(props){

            super(props);

            this.handleChange = this.handleChange.bind(this);

            this.handleSignUp = this.handleSignUp.bind(this);

            this.state = {login: ''};

        }

        handleChange(e){

            this.setState({login: e.target.value});

        }

        handleSignUp(){

            alert(`Welcome aboard,${this.state.login}!`);

        }

        render(){

            return (

                <Dialog

                    title="Mars Exploration Program"

                    message="How should we refer to you?">

                    <input

                        value={this.state.login}

                        onChange={this.handleChange}/>

                    <button onClick={this.handleSignUp}>

                        Sign Me Up!

                    </button>

                </Dialog>

            )

        }

    }

    ReactDOM.render(

        <SigUpDialog />,

        document.getElementById('root')

    );

</script>

</body>

</html>

React-组合模式的更多相关文章

  1. JS设计模式（7）组合模式

    什么是组合模式? 定义:1.将对象组合成树形结构以表示"部分-整体"的层次结构.2.组合模式使得用户对单个对象和组合对象的使用具有一致性.3.无须关心对象有多少层,调用时只需在根部 ...

  2. ComponentPattern （组合模式）

    import java.util.LinkedList; /** * 组合模式 * * @author TMAC-J 主要用于树状结构,用于部分和整体区别无区别的场景 想象一下,假设有一批连锁的理发店 ...

  3. 设计模式(十一)：从文Finder中认识"组合模式"（Composite Pattern）

    上一篇博客中我们从从电影院中认识了"迭代器模式"(Iterator Pattern),今天我们就从文件系统中来认识一下“组合模式”(Composite Pattern).说到组合模 ...

  4. 设计模式（十）组合模式（Composite Pattern）

    一.引言 在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象 ...

  5. 设计模式--组合模式Composite（结构型）

    一.概念 组合模式允许你将对象组合成树形结构来表现"整体/部分"层次结构.组合能让客户以一致的方式处理个别对象以及对象组合. 二.UML图 1.Component(对象接口),定义 ...

  6. 组合模式/composite模式/对象结构型模式

    组合模式/composite模式/对象结构型 意图 将对象组合成树形结构以表示"整体--部分"的层次结构.Composite使得用户对单个对象和组合对象的使用具有一致性. 动机 C ...

  7. c#设计模式-组合模式

    在软件开发过程中,我们经常会遇到处理简单对象和复合对象的情况,例如对操作系统中目录的处理就是这样的一个例子,因为目录可以包括单独的文件,也可以包括文件夹,文件夹又是由文件组成的,由于简单对象和复合对象 ...

  8. C#设计模式系列：组合模式（Composite）

    1.组合模式简介 1.1>.定义 组合模式主要用来处理一类具有“容器特征”的对象——即它们在充当对象的同时,又可以作为容器包含其他多个对象. 1.2>.使用频率 中高 2.组合模式结构图 ...

  9. php实现设计模式之 组合模式

    <?php /** * 组合模式 * * 将对象组合成树形结构以表示"部分-整体"的层次结构,使得客户对单个对象和复合对象的使用具有一致性 * * * 1) 抽象构件角色Co ...

  10. 轻松掌握：JavaScript组合模式

    组合模式 组合模式:将一组对象组合成树形结构,并统一对待组合对象和叶对象,忽略它们之间的不同(因为叶对象也可以也可以包含叶对象而成为组合对象),组合模式中的对象只能是一对多的关系,不能出现多对一. 基 ...

随机推荐

  1. Python开发环境从零搭建-03-安装Python解释器并配置

    想要从零开始搭建一个Python的开发环境说容易也容易 说难也能难倒一片开发人员,在接下来的一系列视频中,会详细的讲解如何一步步搭建python的开发环境 本文章是搭建环境的第3篇 讲解的内容是:安装 ...

  2. 「POJ Challenge」生日礼物

    Tag 堆,贪心,链表 Solution 把连续的符号相同的数缩成一个数,去掉两端的非正数,得到一个正负交替的序列,把该序列中所有数的绝对值扔进堆中,用所有正数的和减去一个最小值,这个最小值的求法与「 ...

  3. BZOJ_2243 [SDOI2011]染色 【树链剖分+线段树】

    一 题目 [SDOI2011]染色 二 分析 感觉树链剖分的这些题真的蛮考验码力的,自己的码力还是不够啊!o(╯□╰)o 还是比较常规的树链剖分,但是一定记得这里的线段树在查询的时候一定要考虑链于链相 ...

  4. Python 详解修饰器 附带 js使用修饰器

    修饰器 功能 修饰器的主要功能是,在不改变已有代码的情况下,为某一个类,方法等扩展功能 首先看这样一段代码 def foo(): for i in range(10): print(i) foo() ...

  5. kthread_worker和kthread_work机制

    1.概述 在阅读内核源码时,可以看到kthread_worker.kthread_work两个数据结构配合内核线程创建函数一起使用的场景.刚开始看到这块时,比较困惑,紧接着仔细分析源码后,终于弄清楚了 ...

  6. java例题_23 递归求年龄

    1 /*23 [程序 23 求岁数] 2 题目:有 5 个人坐在一起,问第五个人多少岁,他说比第 4 个人大 2 岁.问第 4 个人岁数,他说比第 3 个 3 人大 2 岁.问第三个人,又说比第 2 ...

  7. VS2019 自定义项目模板

    前言: 使用"宇宙最强IDE"开发项目时,都需要根据不同情况选择一个项目模板,来满足开发需求:如下 VS为我们提供了基础的项目模板,但现有项目模板未包含基础功能如:日志输出.审计日 ...

  8. 【解决】Could not GET 'https://maven.google.com

    现象 解决方案 1. 由于Google被墙导致的问题 参考 配置阿里云源修改maven的源地址. 2. 由于错误配置代理导致的问题(提示400) 查看工程目录下的gradle.properties和C ...

  9. 01_pytorch和tensorflow的区别

    Pytorch和TensorFlow的区别 目录 引言 pytorch和tensorflow的功能 torch和tf的区别 torch tf Torch和tf到底用哪个 总结 引言 在这里,我们长话短 ...

  10. 呵呵，Semaphore，就这？

    这是并发线程工具类的第二篇文章,在第一篇中,我们分析过 CountDownLatch 的相关内容,你可以参考 一文搞懂 CountDownLatch 用法和源码! 那么本篇文章我们继续来和你聊聊并发工 ...