javascript - 如何写出antd 那样的的组件化的ui?

查看:145
本文介绍了javascript - 如何写出antd 那样的的组件化的ui?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

最近有这样的一个需求,看了下antd的源码感觉有点复杂。。。有没有相对简单的类似项目,或者简单的demo让我先入个门??

解决方案

给你看下我自己封装的 bootstrapCol 组件吧,仅供参考,还有待完善,代码如下:

// 基于 bootstrap & react 封装的 Col Component

import React, { PropTypes } from 'react'

const Col = (props) => {
    let { xs, sm, md, lg, span, className } = props;
    if (!(xs || sm || md || lg)) {
        xs = 12;
    }
    if (span) {
        xs = sm = md = lg = span;
    }
    const colClass = [];
    className && colClass.push(className);

    const colKey = ['xs', 'sm', 'md', 'lg'];
    [ xs, sm, md, lg ].forEach((item, idx) => (item && colClass.push(`col-${colKey[idx]}-${item}`)));

    return (
        <div className={colClass.join(' ')}>
            { props.children }
        </div>
    )
}
Col.propTypes = {
    xs: PropTypes.number,
    sm: PropTypes.number,
    md: PropTypes.number,
    lg: PropTypes.number,
    className: PropTypes.string,
}

export default Col

然后在自己的封装目录下的 index.js 文件中,调用 Col 组件并导出即可:

import React, { Component, PropTypes } from 'react'
import './css/bootstrap.min.css'

// import others....
import Col from './Col'

export { Container, ContainerFluid, Row, Col }

如此,你就可以在你的项目中其他任何地方,调用你自己写的诸如 Col 这样的组件了。好处就是:后续假如你又想用比如 antd 这样的库或框架时,你就直接修改 index.js 对应的组件就可以了,而不用到项目中的每个具体细节处一一修改,提升了后期的可维护性。

这篇关于javascript - 如何写出antd 那样的的组件化的ui?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆