Ant Design | 获取 Grid 的列数

为什么要获取 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>
);