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. 一个极其简易版的vue.js实现

    前言 之前项目中一直在用vue,也边做边学摸滚打爬了近一年.对一些基础原理性的东西有过了解,但是不深入,例如面试经常问的vue的响应式原理,可能大多数人都能答出来Object.defineProper ...

  2. xmind 8 便携版:关联文件后,双击打开文件,在当前文件夹产生configuration子文件的问题解决办法

    Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\.xmind] @="XMind.Workbook.3" " ...

  3. dm_analysis

    # -*- coding: utf-8-*- # import sys import os import io import json reload(sys) sys.setdefaultencodi ...

  4. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  5. 未来-区块链-Aliyun:阿里云IoT - 所知不止于感知

    ylbtech-未来-区块链-Aliyun:阿里云IoT - 所知不止于感知 1.返回顶部 1. 基础产品接入 设备接入 设备管理 数据分析 应用开发 网络管理 边缘计算 设备认证 安全运营 AliO ...

  6. ES6系列之let/const及块级作用域

    本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...

  7. react-redux笔记

    用vuex来对比来说明 分类 vuex redux react-redux 写state commit mutation (mutable state) dispatch reducer (immut ...

  8. VMware 安装 CentOS7

    需要注意几点: 1.分区 分区前先规划好 swap #交换分区,一般设置为内存的2倍 / #剩余所有空间 备注:生产服务器建议单独再划分一个/data分区存放数据 点左下角的“+”号 挂载点:swap ...

  9. ftp服务器使用-windowsftp服务起搭建

    首先打开控制面板选择程序 点击启动或关闭windows功能 勾选ftp服务器和IIS管理控制台点击确定 然后右键点击我的电脑,点击管理,然后点击本地用户和组,然后右键点击用户,点击新用户,创建一个用户 ...

  10. TestLink环境搭建及用例导入

    以下是笔者亲身实践,精心挑选出来的比较好的博文: CentOS7下TestLink环境的部署 https://blog.csdn.net/fxsok244969309/article/details/ ...