1 回答

TA貢獻(xiàn)1804條經(jīng)驗 獲得超7個贊
您可以為您的聯(lián)系人按字母創(chuàng)建一個組,然后迭代這些字母,并為每個字母迭代聯(lián)系人
? ? export default class ShowContactsList extends Component {
? ? ? render() {
? ? ? ? const groupedByLetter = mockData.reduce((groups, contact) => {
? ? ? ? ? const letter = contact.fname[0].toUpperCase();
? ? ? ? ? const group = groups[letter] || [];
? ? ? ? ? group.push(contact);
? ? ? ? ? groups[letter] = group;
? ? ? ? ? return groups;
? ? ? ? }, {});
? ??
? ? ? ? return Object.entries(groupedByLetter).map(([letter, contacts]) => {
? ? ? ? ? return (
? ? ? ? ? ? <div style={{ backgroundColor: "yellow", width: "80%" }}>
? ? ? ? ? ? ? <h1>{letter}</h1>
? ? ? ? ? ? ? {contacts.map((inputMap, index) => (
? ? ? ? ? ? ? ? <ContactListOneContact
? ? ? ? ? ? ? ? ? key={index}
? ? ? ? ? ? ? ? ? lname={inputMap.lname}
? ? ? ? ? ? ? ? ? fname={inputMap.fname}
? ? ? ? ? ? ? ? ? contact={inputMap.contact}
? ? ? ? ? ? ? ? />
? ? ? ? ? ? ? ))}
? ? ? ? ? ? </div>
? ? ? ? ? );
? ? ? ? });
? ? ? }
? ? }
添加回答
舉報