如何使用 react.js 中的 useMemo 钩子响应地更改列数？答案

【问题标题】：How to change number of columns responsively using useMemo hook in react.js?如何使用 react.js 中的 useMemo 钩子响应地更改列数？
【发布时间】：2021-11-08 15:46:45
【问题描述】：

它返回固定的列号，当您添加更多联系人时，它始终是 3 列，我需要更改响应式设计的数字，例如应该是 2 列或 1 基于屏幕分辨率。

const contactsCollsMemo = useMemo(() => {
    return contactsData?.reduce((acc, contact, i) => {
      acc[i % 3] = (acc[i % 3] || []).concat(contact);
      return acc;
    }, {} as { [key: string]: Contact[] });
  }, [contactsData]);
  
return (
  <div className="contacts-wrapper">
     {Object.keys(contactsCollsMemo || {}).map((key) => (
         <ContactBlock key={key} contacts={contactsCollsMemo[key]} />
     ))}
  </div>
)
//component ContactBlock:
<div className="contacts-block">
      {contacts.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>

【问题讨论】：

如果您想要响应式设计，为什么要根据联系人数据更改列数？

标签： javascript reactjs responsive calculated-columns react-usememo

【解决方案1】：

要根据屏幕大小响应列数，您可以使用媒体查询 https://www.w3schools.com/css/css_rwd_mediaqueries.asp 和在 CSS 中显示网格模板 https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template。

【讨论】：