antd（蚂蚁金服使用过程中遇到的小坑）

2024年5月8日 83次阅读 来源: spademan

一、版本（^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讨论地址

    原文作者：spademan
    原文地址: https://segmentfault.com/a/1190000007830998
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞