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

Question

它返回固定的列号，当您添加更多联系人时，它将始终为 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>

Answer 1

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