1. git clone git@github.com:react-component/select.git
  2. cd select
  3. npm i babel-plugin-antd --save-dev
  4. npm i

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

  1. var webpack = require('webpack');
  2. var path = require('path');
  3. module.exports = {
  4.     context: path.resolve(__dirname, './src/'),
  5.     entry: {
  6.         app: './index.js'
  7.     },
  8.     //输出文件出口
  9.     output: {
  10.         /*
  11.          输出路径，在这我们要手动创建一个文件夹，名字可以自己命名，
  12.          输出的文件路径是相对于本文件的路径
  13.          * */
  14.         path: path.resolve(__dirname, './dist/'),
  15.         filename: '[name].js' //输出文件名，文件可以自己定义，[name]的意思是与入口文件的文件对应，可以不用[name]，
  16.     },
  17.     /*
  18.      * 标题：加载器（loaders）
  19.      * 作用：需要下载不同别的加载器，如css，js，png等等
  20.      * */
  21.     module: {
  22.         rules: [
  23.             {
  24.                 test: /\.jsx?$/,
  25.                 exclude: [/node_modules/],
  26.                 use: [
  27.                     {
  28.                         loader: 'babel-loader',
  29.                         options: {
  30.                            "presets": [ "es2015", "stage-0", "react"],
  31.                            "plugins": [["antd", { "style": true }]]
  32.                         }
  33.                     }
  34.                 ]
  35.             },
  36.             { //解析 .less
  37.               test: /\.less$/,
  38.               loader: 'style-loader!css-loader!less-loader' //从右往左 先把less解析成css，再加前缀
  39.           }
  40.             // Loaders for other file types can go here
  41.         ]
  42.     },
  43.     /*
  44.      *
  45.      * */
  46.     resolve: {
  47.           extensions: [' ','.jsx','.js','.json'],
  48.         /*
  49.          * 别名配置，配置之后，可以在别的js文件中直接使用require('d3')，将导入的文件作为一个模块导入到你需要的项目中，不用配置别也可会当作模块导入项目中，只是你要重复写路径而已。
  50.          * */
  51.         alias: {}
  52.     }
  53. }

然后改造src/index.js

  1. import Select from './Select';
  2. import Option from './Option';
  3. import { SelectPropTypes } from './PropTypes';
  4. import OptGroup from './OptGroup';
  5. Select.Option = Option;
  6. Select.OptGroup = OptGroup;
  8. import React from 'react';
  9. import ReactDOM from 'react-dom';
  10. import '../assets/index.less'
  12. class Test extends React.Component {
  13.   state = {
  14.     destroy: false,
  15.     value: String(9),
  16.   };
  18.   onChange = (e) => {
  19.     let value;
  20.     if (e && e.target) {
  21.       value = e.target.value;
  22.     } else {
  23.       value = e;
  24.     }
  25.     console.log('onChange', value);
  26.     this.setState({
  27.       value,
  28.     });
  29.   };
  31.   onDestroy = () => {
  32.     this.setState({
  33.       destroy: 1,
  34.     });
  35.   };
  37.   onBlur = (v) => {
  38.     console.log('onBlur', v);
  39.   };
  41.   onFocus = () => {
  42.     console.log('onFocus');
  43.   };
  45.   render() {
  46.     if (this.state.destroy) {
  47.       return null;
  48.     }
  49.     return (
  50.       <div style={{ margin: 20 }}>
  51.         <div style={{ height: 150 }}/>
  53.         <h2>Single Select</h2>
  55.         <div style={{ width: 300 }}>
  56.           <Select
  57.             value={this.state.value}
  58.             placeholder="placeholder"
  59.             dropdownMenuStyle={{ maxHeight: 200, overflow: 'auto' }}
  60.             style={{ width: 500 }}
  61.             onBlur={this.onBlur}
  62.             onFocus={this.onFocus}
  63.             allowClear
  64.             optionLabelProp="children"
  65.             optionFilterProp="text"
  66.             onChange={this.onChange}
  67.             firstActiveValue="2"
  68.             backfill
  69.           >
  70.             <Option value="01" text="jack" title="jack">
  71.               <b
  72.                 style={{
  73.                   color: 'red',
  74.                 }}
  75.               >
  76.                 jack
  77.               </b>
  78.             </Option>
  79.             <Option value="11" text="lucy">lucy</Option>
  80.             <Option value="21" disabled text="disabled">disabled</Option>
  81.             <Option value="31" text="yiminghe">yiminghe</Option>
  82.             {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => {
  83.               return <Option key={i} text={String(i)}>{i}</Option>;
  84.             })}
  85.           </Select>
  86.         </div>
  88.         <p>
  89.           <button onClick={this.onDestroy}>destroy</button>
  90.         </p>
  91.       </div>
  92.     );
  93.   }
  94. }
  96. ReactDOM.render(<Test />, document.getElementById('__react-content'));

然后命令行

  1. webpack

建立一个index.html


  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"/>
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  8.     <title>rc-select-single</title>
  10. </head>
  11. <body>
  12.   <div id="__react-content"></div>
  14.   <script src='./dist/app.js'>    </script>
  15. </body>
  16. </html>

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

第一阶段完成

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

  1.  alias: {
  2.             react: 'anujs',
  3.             'react-dom': 'anujs',
  4.             'prop-types': 'anujs/lib/ReactPropTypes',
  5.             'create-react-class': 'anujs/lib/createClass'
  6.         }

让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. http options 请求

  2. 面试题-Python高级

    元类 Python 中类方法.类实例方法.静态方法有何区别? 类方法:是类对象的方法,在定义时需要在上方使用“@classmethod”进行装饰,形参为cls, 表示类对象,类对象和实例对象都可调用: ...

  3. git的基本应用(一)

    Git常用的命令: mkdir  文件夹名称           创建文件夹 git  init                     将文件夹交个git管理 ls -ah              ...

  4. 关于mysql 的 autoCommit 参数

    首先描述一下这个参数的作用. 这个参数 默认是开启的. 开启以后再命令敲的sql 会自动提交.如果关闭,就必须手动 commit. 查看 这个 自动提交状态. SELECT @@autocommit; ...

  5. 搞懂iobuffer就得先学习bytebuffer

    ByteBuffer前前后后看过好几次了,实际使用也用了一些,总觉得条理不够清晰. <程序员的思维修炼>一本书讲过,主动学习,要比单纯看资料效果来的好,所以干脆写个详细点的文章来记录一下. ...

  6. shibie

    var mStream: TMemoryStream; vcode: ..] of AnsiChar; buffer: array of AnsiChar; begin mStream := TMem ...

  7. DateTime?，也是一种类型，代表DateTime或NULL两种类型，在处理空时间时比较有用

    public static DateTime? GetDateTimeFromStr(string date) { if (date.Trim() == string.Empty) return nu ...

  8. VirtualBox内Linux系统怎样与Windows共享文件夹

    Windows本机用虚拟机安装Linux系统(前提其他已配置好) 1. 双击无法安装,需要在扩展里添加:管理->全局设定->扩展 ->添加 或者 打开虚拟机进入Ubuntu系统,首先 ...

  9. 好玩的PIL

    原图(下面的代码全为部分)不喜欢的一个库 缩小的代码 from PIL import Image im=Image.open('tupian.jpg') im.thumbnail(128,128)) ...

  10. Redux 学习总结

    1.Redux 设计理念 Web 应用是一个状态机,视图与状态是一一对应的 所有的状态,保存在一个对象里面 2.基本概念和API Redux 的核心就是 store, action, reducer ...