为什么要获取 Grid 的列数？

因为设计如下：

每个 item 的宽度是固定的，列数随 Grid 宽度自动调整，并且最后一排的 item 是不显示底部横线的。

item 底部显示横线：

item 底部不显示横线：

很显然，需要对 item 进行封装，并且有一个属性：

/** 是否显示底部分割线，默认显示 */
showBottomBorder?: boolean;

UI 很简单，现在的问题有两个：

1. 确定列数；
2. 确定最后一排有几个 item。

因为每个 item 的宽度是固定的，然后 Grid 的整体宽度可以通过 ahooks 的 useSize 获取，最后通过计算就可以知道最后一排 item 的数量，伪代码如下：

const { length } = dataSource;// 每排有几个item
const countPerRow = Math.floor(rowSize?.width / itemWidth);// 最后一排item的数量
const lastRowCount = length % countPerRow || countPerRow;const listContainer = (<Row gutter={30} ref={rowRef}>{dataSource.map(({ ...properties }, index) => (<Col key={index}><Item// 最后一排不显示分割线showBottomBorder={length - index > lastRowCount}{...properties}/></Col>))}</Row>
);

但是后面调试的时候发现，在临界条件下，最后一排的几个 item 也显示了底部横线，也就是说计算不精准。

之所以会出现这种情况，是因为 item 的宽度并不是 Grid 中 Col 的宽度，Col 会包裹 item，并添加 padding。要计算准确的列数，需要用 Grid 中 Row 的宽度除以 Col 的宽度，因此还需要用 ahooks 的 useSize 获取 Col 的宽度。

const rowRef = useRef(null);
const rowSize = useSize(rowRef);
const colRef = useRef(null);
const colSize = useSize(colRef);const { length } = dataSource;
// 每排有几个item
const countPerRow = Math.floor((rowSize?.width ?? 1) / (colSize?.width ?? 1));
// 最后一排item的数量
const lastRowCount = length % countPerRow || countPerRow;const listContainer = (<Row gutter={30} ref={rowRef}>{dataSource.map(({ ...properties }, index) => (<Col key={index} ref={colRef}><div className={styles.itemWrap}><Item// 最后一排不显示分割线showBottomBorder={length - index > lastRowCount}{...properties}/></div></Col>))}</Row>
);