git clone git@github.com:react-component/select.git

cd select

npm i babel-plugin-antd --save-dev

npm i

然后自己使用webpack打包，里面是用webpack2，在根目录下建立webpack-config.js

var webpack = require('webpack');

var path = require('path');

module.exports = {

    context: path.resolve(__dirname, './src/'),

    entry: {

        app: './index.js'

    },

    //输出文件出口

    output: {

        /*

         输出路径，在这我们要手动创建一个文件夹，名字可以自己命名，

         输出的文件路径是相对于本文件的路径

         * */

        path: path.resolve(__dirname, './dist/'),

        filename: '[name].js' //输出文件名，文件可以自己定义，[name]的意思是与入口文件的文件对应，可以不用[name]，

    },

    /*

     * 标题：加载器（loaders）

     * 作用：需要下载不同别的加载器，如css，js，png等等

     * */

    module: {

        rules: [

            {

                test: /\.jsx?$/,

                exclude: [/node_modules/],

                use: [

                    {

                        loader: 'babel-loader',

                        options: {

                           "presets": [ "es2015", "stage-0", "react"],

                           "plugins": [["antd", { "style": true }]]

                        }

                    }

                ]

            },

            { //解析 .less

              test: /\.less$/,

              loader: 'style-loader!css-loader!less-loader' //从右往左 先把less解析成css，再加前缀

          }

            // Loaders for other file types can go here

        ]

    },

    /*

     *

     * */

    resolve: {

          extensions: [' ','.jsx','.js','.json'],

        /*

         * 别名配置，配置之后，可以在别的js文件中直接使用require('d3')，将导入的文件作为一个模块导入到你需要的项目中，不用配置别也可会当作模块导入项目中，只是你要重复写路径而已。

         * */

        alias: {}

    }

}

然后改造src/index.js

import Select from './Select';

import Option from './Option';

import { SelectPropTypes } from './PropTypes';

import OptGroup from './OptGroup';

Select.Option = Option;

Select.OptGroup = OptGroup;

import React from 'react';

import ReactDOM from 'react-dom';

import '../assets/index.less'

class Test extends React.Component {

  state = {

    destroy: false,

    value: String(9),

  };

  onChange = (e) => {

    let value;

    if (e && e.target) {

      value = e.target.value;

    } else {

      value = e;

    }

    console.log('onChange', value);

    this.setState({

      value,

    });

  };

  onDestroy = () => {

    this.setState({

      destroy: 1,

    });

  };

  onBlur = (v) => {

    console.log('onBlur', v);

  };

  onFocus = () => {

    console.log('onFocus');

  };

  render() {

    if (this.state.destroy) {

      return null;

    }

    return (

      <div style={{ margin: 20 }}>

        <div style={{ height: 150 }}/>

        <h2>Single Select</h2>

        <div style={{ width: 300 }}>

          <Select

            value={this.state.value}

            placeholder="placeholder"

            dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}

            style={{ width: 500 }}

            onBlur={this.onBlur}

            onFocus={this.onFocus}

            allowClear

            optionLabelProp="children"

            optionFilterProp="text"

            onChange={this.onChange}

            firstActiveValue="2"

            backfill

          >

            <Option value="01" text="jack" title="jack">

              <b

                style={{

                  color: 'red',

                }}

              >

                jack

              </b>

            </Option>

            <Option value="11" text="lucy">lucy</Option>

            <Option value="21" disabled text="disabled">disabled</Option>

            <Option value="31" text="yiminghe">yiminghe</Option>

            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {

              return <Option key={i} text={String(i)}>{i}</Option>;

            })}

          </Select>

        </div>

        <p>

          <button onClick={this.onDestroy}>destroy</button>

        </p>

      </div>

    );

  }

}

ReactDOM.render(<Test />, document.getElementById('__react-content'));

然后命令行

webpack

建立一个index.html



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>

    <title>rc-select-single</title>

</head>

<body>

  <div id="__react-content"></div>

  <script src='./dist/app.js'>    </script>

</body>

</html>

最后你可以安装 npm i serve来安装一个http服务器，或者使用vs code直接打开

第一阶段完成

然后要瘦身，将react改成anujs那套东西，只要在webpack的配置对象上改一改

 alias: {

            react: 'anujs',

            'react-dom': 'anujs',

            'prop-types': 'anujs/lib/ReactPropTypes',

            'create-react-class': 'anujs/lib/createClass'

        }

让anujs支持rc-select的更多相关文章

  1. sqldependency 支持的select

    https://msdn.microsoft.com/library/ms181122.aspx   支持的 SELECT 语句 满足下列要求的 SELECT 语句支持查询通知: 必须显式说明 SEL ...

  2. mysql select into 不支持

    不支持的 select * into order_new from orders 改为 Create table order_new(select * from orders)  

  3. MySQL 中隔离级别 RC 与 RR 的区别

    1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的多个操作,不可分割,要么都成功,要么都失败: All or Nothing. 一致性(Consistency): ...

  4. select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET

    http://hi.baidu.com/%B1%D5%C4%BF%B3%C9%B7%F0/blog/item/e7284ef16bcec3c70a46e05e.html select函数用于在非阻塞中 ...

  5. Linux 网络编程九（select应用--大并发处理）

    //网络编程服务端 /* * 备注:因为客户端代码.辅助方法代码和epoll相同,所以select只展示服务器端代码 */ #include <stdio.h> #include < ...

  6. select()函数以及FD_ZERO、FD_SET、FD_CLR、FD_ISSET (转）

    select函数用于在非阻塞中,当一个套接字或一组套接字有信号时通知你,系统提供select函数来实现多路复用输入/输出模型,原型: #include <sys/time.h>       ...

  7. select poll使用

    select poll使用     2.1. 怎样管理多个连接?“我想同一时候监控一个以上的文件描写叙述符(fd)/连接(connection)/流(stream),应该怎么办?” 使用 select ...

  8. linux select 与 阻塞( blocking ) 及非阻塞 (non blocking)实现io多路复用的示例

    除了自己实现之外,还有个c语言写的基于事件的开源网络库:libevent http://www.cnblogs.com/Anker/p/3265058.html 最简单的select示例: #incl ...

  9. mysql rr和rc区别

    <pre name="code" class="html">1. 数据库事务ACID特性 数据库事务的4个特性: 原子性(Atomic): 事务中的 ...

随机推荐

  1. QCAD 修改默认的线宽

    QCAD 修改默认的线宽 默认的宽度实在是太宽了,把一些细节给掩盖了. 可以按以下方法找到修改默认宽度. 在 Layer -> Edit Layer 中. 最开始找了好久好久. 最开始在这里找了 ...

  2. source-insight 常用操作

    [Ctrl + ] 跳转到函数.宏.变量 等定义处. [Alt  > ] 跳转到最近光标停留位置. [Alt  < ] 跳转到上次近光标停留位置. [Ctrl Shift [ ] 块位置开 ...

  3. Linux基础入门-文件打包与解压缩

    文件打包与解压缩: Windows上常见的压缩文件后缀有*.zip(zip程序打包压缩), *.rar(rar程序压缩), *.7z(7zip程序压缩),在Linux上常见的还有*.gz(gzip程序 ...

  4. nginx 配置说明

    ======nginx 配置文件分开==== http://blog.csdn.net/baple/article/details/44197981 1.备份现在有nginx.conf2.复制ngin ...

  5. h5课件是什么？h5（html5）怎样实现交互动画开发？-----浅谈h5交互动画课件的优势

    目前很多交互课件,尤其幼儿类的交互课件以动画和交互相结合的类型居多,越来越多的教育机构发现了这种课件对于幼儿的吸引力远大于其他类型的课件,随着flash逐渐被市场淘汰,动画和交互相结合的html5跨平 ...

  6. WPF 开源项目

    Modern UI for WPF :http://mui.codeplex.com/ 利用Wpf实现Win8 Modern样式的开源项目wpf toolkit :http://wpftoolkit. ...

  7. python_项目_ATM和购物商城的程序

    1 需求 模拟实现一个ATM + 购物商城程序 额度15000或自定义 实现购物商城,买东西加入购物车,调用信用卡接口结账 可以提现,手续费5% 支持多账户登录 支持账户间转账 记录每月日常消费流水 ...

  8. php中cookie和session的总结

    cookie: 设置cookie:  setcookie("name","zhang","time()+3600"); 参数一:属性名 参数 ...

  9. openj9

       下面部分转自:https://www.jianshu.com/p/916b5fcd0140 OpenJ9,OMR与OpenJDK Eclipse OpenJ9 是一个 Java 虚拟机(JVM) ...

  10. python 字符串转16进制函数

    需要用python处理16进制的文本,比如像下面这个文本 40 80 C0 40 80 C0 40 80 C0 40 80 C0 40 BF CC 40 80 C0 40 80 C0 40 80 C0 ...