ANT使用的注意事项

2020-06-23 587 阅读1分钟

最近在使用ant+react开发后台可视化管理系统，遇到一些很奇怪的问题，记录下。

select

select组建配合options组建使用

在使用options渲染组建的时候，他自身设置的key无效，值是跟随着value走的，如果这个时候后端返回的时候有重复就会diff算法混乱渲染出来的乱七八糟。你能想到的都会出现
在select内使用onsearch方法的时候，如果数据是在后台请求响应过来的话，切记*filterOption={false}*避免自身带的filter属性

table

table配合onExpandedRowsChange使用的时候，在我渲染data数据的时候，onExpandedRowsChange会默认触发而且触发的值是[1], 玄学，也不知道咋搞。所以我在查询data的时候setstate的expandedRowKeys为[]。
产品提出一个需求。table扩展的时候不要前面的+。在某一列加入详情两个字。下面列出实计代码，用到table 三个属性

const customIcon =  props => {
  const { record } = props;
  return <a onClick={e => props.onExpand(record, e)}>点击</a>;
};

<Table
    expandIconAsCell={false}   // 去除图案（其实我也不知道干嘛的）
    expandIconColumnIndex={4}  // 选择你想出现的节点
    expandIcon={customIcon}    // 渲染图标变成文字 
    expandedRowRender={expandedRowRender}
    columns={itemOnecolums}
    pagination={false}
    dataSource={itemOnedata}
    />