一、介绍

不论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. std::map自定义类型key

    故事背景:最近的需求需要把一个结构体struct作为map的key,时间time作为value,定义:std::map<struct, time> _mapTest; 技术调研:众所周知, ...

  2. RSA加解密&RSA加验签详解

    RSA 加密算法是目前最有影响力的 公钥加密算法,并且被普遍认为是目前 最优秀的公钥方案 之一.RSA 是第一个能同时用于 加密 和 数字签名 的算法,它能够 抵抗 到目前为止已知的 所有密码攻击,已 ...

  3. SQL Server如何正确的删除Windows认证用户

    在SQL Server数据库中,有时候会建立一些Windows认证的账号(域账号),例如,我们公司习惯给开发人员和Support同事开通NT账号权限,如果有离职或负责事宜变更的话,那么要如何正确的删除 ...

  4. XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1)

    XTTS Creates Alias on Destination when Source and Destination use ASM (Doc ID 2351123.1) APPLIES TO: ...

  5. 分组排序函数——row_number()

    1.MySQL8.0以上版本 用法1:无分组排序 Row_number() OVER(ORDER BY 字段 DESC)例如:Row_number() OVER(ORDER BY 学生成绩 DESC) ...

  6. 正则表达式(Regular Expression)入门

    一.正则表达式的使用场景: 上传文件类型的判断,电子邮件的判断,电话号码的判断,文本的搜索与替换. 二.正则表达式的语法规则: 1.行定位符: ^表示行的开始,$表示行的结尾 ^tm 可以匹配  tm ...

  7. 关于eclipse创建的[传统web项目][传统maven项目][maven-web项目][springboot项目]目录结构

    总体比较 [传统web项目] [传统maven项目] [maven-web项目] [springboot项目] 本文摘至https://blog.csdn.net/qq_42747738/articl ...

  8. Java之String类

    String类概述 java.lang.String 类代表字符串.Java程序中所有的字符串文字(例如 "abc" )都可以被看作是实现此类的实例.其实就是说:程序当中所有的双引 ...

  9. 基于 CAS 无锁实现的 Disruptor.NET 居然慢于 BlockingCollection，是真的吗？

    StackOverflow 有人说自己的Disruptor.NET 代码比 BlockingCollection 还有慢 2 倍,并且把完整代码贴出,楼下几个老外也的回复说了一堆,但是没研究出个所以然 ...

  10. Qt平台下使用QJson解析和构建JSON字符串

    前言 上一篇介绍了C语言写的JSON解析库cJSON的使用:使用cJSON库解析和构建JSON字符串 本篇文章介绍,Qt开发环境下QJson库的使用示例,JSON解析配合API接口,就可以实现一些有趣 ...