第一次手写react组件

也算是有纪念意义的，尽管现在感觉有些朦胧。比如，写一个button的样式加功能实现。现在还看不到UI的样子，等本书后面的内容吧。

1, share/index.js

export { default as Select } from './select/index';
export { default as Title } from './title/index';
export { default as List } from './list/index';
export { default as Input } from './input/index';
export { default as Search } from './search/index';
export { default as Type } from './type/index';
export { default as Button } from './button/index';
export { default as TabBottom } from './tab-bottom/index';
export { default as Card } from './card/index';

2, share/default.less

@hd: 1px; //基本单位

//字体颜色
@c-main: #cc0000;
@c-gray: #ddd;
@c-white: #fff;
@c-ccc: #ccc;
@c-eee: #eee;
@c-999: #999;
@c-333: #333;

//背景色
@bc-main: #cc0000;
@bc-black: #333;
@bc-gray: #ddd;
@bc-body: #f5f5f9;
@bc-white: #fff;

//图片尺寸
@size-10: 10 * @hd;
@size-12: 12 * @hd;
@size-14: 14 * @hd;
@size-16: 16 * @hd;
@size-20: 20 * @hd;
@size-30: 30 * @hd;
@size-40: 40 * @hd;
@size-50: 50 * @hd;

//边框色
@border-c-base: #ddd;

3, share/button/index.less

@import '../default';
@prefixCls: s-button;
.@{prefixCls} {
    display: flex;
    justify-content: center;
    &-btn {
        text-align: center;
        height: (@size-40) - 5;
        line-height: (@size-40) - 5;
        border: 1px solid @c-main;
        border-radius: @size-10;
        color: @c-main;
        width: 30%;
        margin-left: auto;
        margin-right: auto;
    }
    &-active {
        background-color: #eee;
    }
}
.@{prefixCls}-btn-fill {
    height: @size-40;
    line-height: @size-40;
    background: @c-main;
    color: @c-white;
    border-radius: @size-10;
    text-align: center;
    font-size: @size-16;
    font-weight: bold;
}
.@{prefixCls}-btn-half {
    height: @size-40;
    line-height: @size-40;
    background: @c-main;
    color: @c-white;
    border-radius: @size-10;
    text-align: center;
    font-size: @size-16;
    font-weight: bold;
    width: 48%;
}

4, share/button/defaultProps.js

function noop() {}
export const defaultProps = {
    prefixCls: 's-button',
    onClick: noop,
    type: '',
    children: [],
    className: ''
}

5, share/button/index.js

import React from 'react';
import classnames from 'classnames';
import '../index.css';
import {defaultProps} from './defaultProps';
import TouchFeedback from 'rmc-feedback';

//两个中文字符的正则表达式
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/;
//判断是否是两个字符
cont isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
//判断是否是字符类型
function isString(str) {
    return typeof str === 'string';
}
//判断如果是两个中文字符则插入空格
function insertSpace(child) {
    if (isString(child.type) && isTwoCNChar(child.props.children)) {
        return React.cloneElement(
            child,
            {},
            child.props.children.split('').join(' '),
        );
    }
    if (isString(child)) {
        if (isTwoCNChar(child)) {
            child = child.split('').join(' ');
        }
    }
    return child;
}

export default class Button extends React.Component {
    static defaultProps = defaultProps;
    handleClick() {
        const { onClick } = this.props;
        if (onClick) {
            onClick();
        }
    };
    render() {
        const { prefixCls, type, children, className } = this.props;
        //通过classname方法将所有class整合
        const wrapCls = classnames(prefixCls, className, {
            ['${prefixCls}-btn']: (type === 'primary'||!type),
            ['${prefixCls}-btn-fill']: type === 'fill',
            ['${prefixCls}-btn-half']: type === 'half',
        });
        //调用insertSpace方法判断，如果是两个中文字符则插入空格
        const kids = React.Children.map(children, insertSpace);
        return(
            <TouchFeedback activeClassName={prefixCls+'-active'}>
                <div className={wrapCls} onClick{()=>this.handleClick()}>
                    {kids}
                </div>
            </TouchFeedback>
        )
    }
}