React.js中如何使用useMemo Hook实现响应式动态调整列数？

你的原有实现通过JS硬编码将数据按3列拆分，和布局逻辑强绑定，无法适配响应式列数调整，建议将布局逻辑交给CSS处理，改动如下：

1. 调整JS代码，移除固定分列逻辑 #

删除原来按3列拆分数据的useMemo逻辑，直接渲染所有联系人条目即可，无需提前按列分组：

// 已删除无用的固定分列useMemo逻辑
return (
  <div className="contacts-wrapper">
    {contactsData?.map((contact) => (
      <div key={contact.id} className="contacts-info">
        <div className="contacts-name">{contact.name}</div>
        <div className="contacts-phone">Тел.: {contact.phone}</div>
        <div className="contacts-email">E-mail: {contact.email}</div>
      </div>
    ))}
  </div>
)
// 原ContactBlock组件无需再使用，可直接移除

2. 新增响应式CSS样式 #

使用CSS Grid实现自动适配列数，你可以根据业务需求调整最小列宽和断点阈值：

.contacts-wrapper {
  display: grid;
  /* 自动适配列数：单条最小宽度280px，宽度足够时自动新增列 */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; /* 控制条目之间的横向、纵向间距 */
}

/* 如需更精准的断点控制，可添加媒体查询覆盖规则 */
@media (max-width: 768px) {
  .contacts-wrapper {
    /* 宽度≤768px时固定展示2列 */
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .contacts-wrapper {
    /* 宽度≤480px时固定展示1列 */
    grid-template-columns: 1fr;
  }
}

方案说明 #

调整后列数完全由CSS根据屏幕宽度自动计算，无需绑定JS拆分逻辑，后续要调整列数规则、间距、最小宽度等参数只需修改CSS即可，维护成本更低，也能完美适配各种分辨率的设备。

内容的提问来源于stack exchange，提问作者Perizat Sabitbek