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

spademan發表於2016-12-16

一、版本（^2.5.2）

1、引入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`
})

2、時間設定方式（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的值

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

應該是類似value和defaultValue的相似問題，而這個裡defaultExpandAllRows
就是像defaultValue那樣 只在第一次渲染的時候起作用
而很多時候我們的資料初始是空的
解決方案如下

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

3、設定在樹形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討論地址

相關文章