antd(蚂蚁金服使用过程中遇到的小坑)
发布时间:2020-12-15 08:16:31 所属栏目:百科 来源:网络整理
导读:一、版本(^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
一、版本(^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
in ./~/css-loader!./~/style-loader!./~/css-loader?sourceMap!./~/postcss-loader!./~/antd/dist/antd.css Module build failed: Unknown word (5:1)` 其实是因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入 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)应该是类似 {dataSource && dataSource.length ? <Table columns={columns} dataSource={dataSource} defaultExpandAllRows={true} indentSize={0}/> : '暂无数据' } //保证有数据的时候再渲染table 3、设置在树形table中设置 colSpan出现排版异常(demo)(^2.6.0)目前的解决方案是给相应的tr和td加指定的类 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,index) => { const obj = {} obj.children = <span>{text}</span> if (xxx && isChildExpand) { obj.props = { rowSpan: // 输入需要夸多少行的数字 } } return obj }
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |