feat: 重构下 className 的写法，支持原有的 className

components/layout/col.jsx

 import React from 'react';
+import rcUtil from 'rc-util';
 
 const Col = React.createClass({
   propTypes: {
@@ -7,29 +8,20 @@ const Col = React.createClass({
     offset: React.PropTypes.string,
     push: React.PropTypes.string,
     pull: React.PropTypes.string,
+    className: React.PropTypes.string,
     children: React.PropTypes.node,
   },
-
   render() {
-    const {span, order, offset, push, pull } = this.props;
-    let className = `col-${span}`;
-
-    if (order) {
-      className += ` col-order-${order}`;
-    }
-
-    if (offset) {
-      className += ` col-offset-${offset}`;
-    }
-
-    if (push) {
-      className += ` col-push-${push}`;
-    }
-
-    if (pull) {
-      className += ` col-pull-${pull}`;
-    }
-    return <div {...this.props} className={className}>{ this.props.children }</div>;
+    const {span, order, offset, push, pull, className, ...others} = this.props;
+    const classes = rcUtil.classSet({
+      ['col-' + span]: span,
+      ['col-order-' + order]: order,
+      ['col-offset-' + offset]: offset,
+      ['col-push-' + push]: push,
+      ['col-pull-' + pull]: pull,
+      [className]: className,
+    });
+    return <div {...others} className={classes}>{ this.props.children }</div>;
   },
 });
 

components/layout/demo/basic.md

@@ -18,10 +18,10 @@ ReactDOM.render(
       <Col span="12">.col-12</Col>
       <Col span="12">.col-12</Col>
     </Row>
-    <Row>
-      <Col span="8">.col-8</Col>
+    <Row className="testRowClassName">
       <Col span="8">.col-8</Col>
       <Col span="8">.col-8</Col>
+      <Col span="8" className="testColClassName">.col-8</Col>
     </Row>
     <Row>
       <Col span="6">.col-6</Col>
@@ -32,4 +32,13 @@ ReactDOM.render(
   </div>,
   document.getElementById('components-layout-demo-basic')
 );
-````
\ No newline at end of file
+````
+
+<style>
+.testRowClassName {
+	background: #f0f0f0;
+}
+div.testColClassName {
+	background: rgba(24, 115, 216, 0.9);
+}
+</style>
\ No newline at end of file

components/layout/row.jsx

 import React from 'react';
+import rcUtil from 'rc-util';
 
 const Row = React.createClass({
   propTypes: {
     type: React.PropTypes.string,
     align: React.PropTypes.string,
     justify: React.PropTypes.string,
+    className: React.PropTypes.string,
     children: React.PropTypes.node,
   },
-
   render() {
-    const { type, justify, align } = this.props;
-    let className = 'row';
-
-    if (type || justify || align) {
-      className += ` row-flex`;
-    }
-
-    if (justify) {
-      className += ` row-flex-${justify}`;
-    }
-
-    if (align) {
-      className += ` row-flex-${align}`;
-    }
-
-    return <div {...this.props} className={className}>{ this.props.children }</div>;
+    const { type, justify, align, className, ...others } = this.props;
+    const classes = rcUtil.classSet({
+      'row': true,
+      ['row-' + type]: type,
+      ['row-' + type + '-' + justify]: justify,
+      ['row-' + type + '-' + align]: align,
+      [className]: className,
+    });
+    return <div {...others} className={classes}>{ this.props.children }</div>;
   },
 });