一、介绍

不论Web界面是多么的复杂，它都是由一个个简单的组件组合起来实现的，既然会创建一个简单的组件，那么复杂的组件就有了下手的切入点了。现在来实现一个简单的复合组件。一个颜色面板，一共三部分组成。顶部是颜色板，底部是色值标签，一个大的box将这两个组件组合起来。吾尚在学习阶段，所以demo及其简单。

二、实现

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        //颜色板

        var ColorBoard = React.createClass({

            render: function(){

                var colorBoardStyle = {

                    height:150,

                    backgroundColor:this.props.color

                };

                return (

                        <div style= {colorBoardStyle}>

                        </div>

                    );

            }

        });

        //颜色值标签

        var ColorLabel = React.createClass({

            render: function(){

                var colorLabelStyle = {

                    backgroundColor:'#FFF',

                    height:50,

                    padding:10,

                    margin:0,

                };

                var fontStyle = {

                    fontFamily:"sans-serif",

                    fontWight:"bold",

                    fontSize:20,

                    color:this.props.color,

                    textAlign:"center"

                }

                return (

                        <div style={colorLabelStyle} >

                            <p style= {fontStyle}>颜色值：{this.props.color}</p>

                        </div>

                    );

            }

        });

        //颜色盒子

        var ColorBox = React.createClass({

            render:function(){

                var colorBoxStyle = {

                    width:200,

                    height:200,

                    backgroundColor:'#FFF',

                    WebkitFilter:"drop-shadow(0px 0px 5px #666)", //设置阴影

                    filter:"drop-shadow(0px 0px 5px #666)"        //设置阴影

                };

                return (

                        <div style={colorBoxStyle} >

                            <ColorBoard color={this.props.color}></ColorBoard>

                            <ColorLabel color={this.props.color}></ColorLabel>

                        </div>

                    );

            }

        });

        ReactDOM.render(

                        <ColorBox color="#AD4D"/>,

                        document.getElementById('container')

                    );

    </script>

</body>

</html>

React: React的复合组件的更多相关文章

  1. 【04】react 之 复合组件

    1.1.  什么是组件? 前端开发中组件也称为UI组件,组件即将一段或几段完成各自功能的代码段封装为一个或几个独立的部分.UI组件包含了这样一个或几个具有各自功能的代码段,最终完成了用户界面的表示.R ...

  2. react基础语法（三）组件的创建和复合组件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. React Native 学习－组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  4. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  5. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  6. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  7. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  8. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

  9. 初学React：定义一个组件

    接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. [转]Python十个高大上的语法

    Python 是一种代表简单思想的语言,其语法相对简单,很容易上手.不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了.本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并 ...

  2. react-router刷新页面Cannot GET 问题

    最近在做项目的时候遇到了如下错误 并在控制台看到了如下的报错 我先是按照控制台的错误搜索,得出的结果都是对meta头部进行设置,允许资源请求,但是问题依然没有解决,偶然间改变了想法,会不会是路由的问题 ...

  3. 如何使用python远程操作linux

    在云服务测试中,往往需要我们进入云服务内容进行相关内容的测试.这测试可以使用平台自身的noVNC.外部辅助xshell等工具连接到云服务内部进行测试.但是在如此反复的测试操作中,就需要用到自动化测试方 ...

  4. php7深入理解匿名函数和回调函数

    匿名函数是没有名称的函数,可以将函数赋值给变量,再调用使用,回调函数是指作为一个参数值传值另外一个函数使用的函数. //匿名函数 没名称的函数 $a=function (){echo "ww ...

  5. ubuntu 查看端口被占用并删除端口

    做网络的同学,估计会经常用到这个功能,这里就做一个记录吧. 首先查看特定端口是占用了: sudo netstat -nplt 其次要删除特定端口并查看: kill -9 pid_num sudo ne ...

  6. SpringBoot：@Scope注解学习

    概述 先通过注解的javadoc,可以了解到,@Scope在和@Component注解一起修饰在类上,作为类级别注解时,@Scope表示该类实例的范围,在和@Bean一起修饰在方法上,作为方法级别注解 ...

  7. Java大数类 BigInteger

    package bigint; /** * This class encapsulates a BigInteger, i.e. a positive or negative integer * wi ...

  8. Swoole 启动一个服务，开启了哪些进程和线程？

    目录 概述 代码 小结 概述 Swoole 启动一个服务,开启了哪些进程和线程? 为了解决这个问题,咱们启动一个最简单的服务,一起看看究竟启动了哪些进程和线程? 然后结合官网运行流程图,对每个进程和线 ...

  9. 如何设计APP版本号？

    示例: 2.14.21 (主版本号.次版本号.补丁号) 我们可以这样设计,软件包的版本号以英文句号分隔的三个数字来定义,分别代表主版本号.次版本号和补丁号.如果只是修复了错误,没有添加任何功能,也不会 ...

  10. ActiveMQ学习总结------Spring整合ActiveMQ 04

    通过前几篇的学习,相信大家已经对我们的ActiveMQ的原生操作已经有了个深刻的概念, 那么这篇文章就来带领大家一步一步学习下ActiveMQ结合Spring的实战操作 注:本文将省略一部分与Acti ...