antd（螞蟻金服使用過程當中遇到的小坑）

1、版本（^2.5.2）

一、引入antd.css（^2.5.2）

import React, { PropTypes } from 'react'
import 'antd/dist/antd.css'
function CoreLayout ({ children }) {
  return (
    <div className='user-content'>
      <div>
        {children}
      </div>
    </div>
  )
}
export default CoreLayout

(1).可能會出現壓縮運行不成功問題 好比：

in ./~/css-loader!./~/style-loader!./~/css-loader?sourceMap!./~/postcss-loader!./~/antd/dist/antd.css Module build failed: Unknown word (5:1)`

實際上是由於 在webpack.config中沒有設置好css引入的目錄，由於默認狀況下咱們只會引入/src/目錄下的css，
可是antd的官方教程是要衝node_modules目錄去引入的
因此

webpackConfig.module.loaders.push({
  test: /\.css$/,
  include: [
    /src/,
    '/node_modules/antd/dist/'   //增長此項
  ],
  loader: 'style!css'
})

二、時間設置方式（datePicker）（^2.5.2）

<DatePicker ref='beginCreateTime' 
   value={beginCreateTimeValue ? moment(beginCreateTimeValue) : null} 
   onChange={this.getBeginCreateTime} size='default' 
/>
// 須要注意項： 1.dataPicker的value或者defaultValue都只接受 moment對象或者接受null
// 傳入 null表示空值
// 控件自己自帶的刪除時間按鈕能夠清空pickerdate的值，咱們手動傳入null也能清空pickerdate的值

三、defaultExpandAllRows={true} 不起做用（github討論地址） （^2.6.0）

應該是相似value和defaultValue的類似問題，而這個裏defaultExpandAllRows
就是像defaultValue那樣 只在第一次渲染的時候起做用
而不少時候咱們的數據初始是空的
解決方案以下

{dataSource && dataSource.length 
    ? <Table columns={columns} dataSource={dataSource} defaultExpandAllRows={true} indentSize={0}/> 
    : '暫無數據' }
//保證有數據的時候再渲染table

三、設置在樹形table中設置 colSpan出現排版異常（demo）（^2.6.0）

目前的解決方案是給相應的tr和td加指定的類
（1）設置跨行

const columns = [{
    ...
    render: (text, row, index) => {
        const obj = {}
        obj.children = <span>{text}</span>
        if (xxx) {
            obj.props = {
              rowSpan: // 輸入須要誇多少行的數字
            }
        }
        return obj
    }
 ....
  }]

（2）第（1）個方案 可能在默認展開狀態下是沒有什麼問題的
可是一旦 收起來 或者展開樹形結構 就可能有問題
這個時候就要結合

const onExpand = (expaned, record) => {
      // 當前行的展開和關閉
      record.isChildExpand = expaned
    }
    
    // 而後 render函數中根據 isChildExpand來動態設置是否須要跨行 正常來講 收起來的時候是不須要跨行的，因此 設置colSpan = 0
    const columns = [{
    ...
    render: (text, row, index) => {
        const obj = {}
        obj.children = <span>{text}</span>
        if (xxx && isChildExpand) {
           obj.props = {
              rowSpan: // 輸入須要誇多少行的數字
            }
        }
        return obj
    }

解決方案暫時沒有demo,上面的demo是排版有問題的demo,等官方解決吧
github討論地址