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. Python assert(断言)

    Python assert(断言)可以分别后面的判断是否正确,如果错误会报错 示例: a = 1 assert type(a) is int print('No problem') 输出结果: No ...

  2. 关于DDS的基础知识

    关于DDS的基础知识 声明:这篇博客是我抄别人的,为什么想抄呢,因为他把DDS中的核心部件,相位累加器以及正弦ROM查找表寻址讲得明明白白,我真的好想把这篇文章据为己有. DDS是直接数字式频率合成器 ...

  3. mysql导入sql文件出错的一种解决方法

    转:https://blog.csdn.net/u011806486/article/details/60147358 本人在本地使用navicat for mysql可以连接到服务器数据库,但是从服 ...

  4. 黄聪：PHP去掉转义后字符串中的反斜杠\函数stripslashes

    addslashes函数主要是在字符串中添加反斜杠对特殊字符进行转义,stripslashes则是去掉转义后字符串中的反斜杠\,比如当你提交一段json数据到PHP端的时候可能会遇到json字符串中有 ...

  5. Emoji表情代码大全

    Name   Unified DoCoMo KDDI Softbank Google Wechat   black sun with rays U+2600 U+E63E U+E488 U+E04A ...

  6. DiscuzX2.5,X3.0,X3.1,X3.2完整目录结构【模板目录template】

    /template/default/common  公共模板目录全局加载 block_forumtree.htm  DIY论坛树形列表模块 block_thread.htm  DIY帖子模块调用文件 ...

  7. Optaplanner规划引擎的工作原理及简单示例(1)

    在之前的文章中,老猿已介绍过APS及规划的相关内容,也对Optaplanner相关的概念和一些使用示例进行过介绍,接下来的文章中,我会自己做一个规划小程序 - 一个关于把任务分配到不同的机台上进行作来 ...

  8. primo驱动启动顺序

    primo驱动启动顺序HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\ServiceGroupOrderSystem ReservedEMSWdfLoa ...

  9. GNU make 汇总

    = 是最基本的赋值 := 是覆盖之前的值?= 是如果没有被赋值过就赋予等号后面的值+= 是添加等号后面的值 $@--目标文件,$^--所有的依赖文件,$<--第一个依赖文件 makefile获取 ...

  10. 基于STM8的TIM定时器操作---STM8-第三章

    1. 综述 STM8S提供三种类型的 TIM 定时器:高级控制型(TIM1).通用型(TIM2/TIM3/TIM5)和基本型定时器(TIM4/TIM6).它们虽有不同功能但都基于共同的架构.此共同的架 ...