Проблем:

Ако пишувате React подолго време, сигурно сте го напишале ова милион пати за да рендерирате листа на елементи:

const Component = () => {
  const books = [
    { id: 1, title: 'The Catcher in the Rye', author: 'J.D. Salinger' },
    { id: 2, title: 'To Kill a Mockingbird', author: 'Harper Lee' },
    { id: 3, title: '1984', author: 'George Orwell', read: true },
  ];

  return (
    <div>
      <h2>Book List</h2>
      <ul>
        {books.map((book) => (
          <li key={book.id}>
            <strong>{book.title}</strong> by {book.author}
            <i>{book.read ? 'Read' : 'Not Read'}</i>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Component;

Овој пристап има неколку проблеми:

• Го повторувате .map() секој пат кога треба да рендерирате листа.
• Морате рачно да додавате key проп на секој мапиран елемент.
• Вашиот JSX станува преполн со инлајн логика за мапирање, што го прави кодот нечитлив.

Решението: Мала Each помошна компонента

Наместо да пишувате .map() инлајн секој пат одново, креирајте нов фајл наречен Each.jsx и експортирајте мала помошна компонента:

// Each.jsx
import { Children } from 'react';

export const Each = ({ render, of }) =>
  Children.toArray(of.map((item, index) => render(item, index)));

Тоа е се. Четири линии код.

Како функционира

• of – низата (array) преку која сакате да итерирате.
• render – функција која го прима секој елемент и неговиот индекс, и враќа JSX.
• Children.toArray() – React алатка која го обвиткува излезот и автоматски доделува уникатен key на секој елемент. Нема повеќе рачно додавање на key пропови.

Како да ја користите во вашата компонента

Импортирајте ја Each во вашата компонента и користете ја во JSX:

// Component.jsx
import { Each } from "./Each";

const Component = () => {
  const books = [
    { id: 1, title: 'АКО СЕ РОДАТ НЕКАКВИ ЧУВСТВА', author: 'Блаже Миневски' },
    { id: 2, title: 'КУЛТУРА И МЕМОРИЈА', author: 'Марта Маркоска' },
    { id: 3, title: 'ПАТУВАЊЕ СО ЉУБЕНАТА', author: 'Божин Павловски', read: true },
  ];

  return (
    <div>
      <h2>Листа на книги</h2>
      <ul>
        <Each of={books} render={(item, index) =>
          <li>{`${index}: ${item.title}`}</li>
        } />
      </ul>
    </div>
  );
};

export default Component;

Што добивате

• Нема повеќе рачни клучеви. Children.toArray автоматски се грижи за доделувањето на key.
• Почист JSX. Вашата логика за рендерирање се чита декларативно: „за секој елемент од оваа низа, рендерирај го ова” – наместо да вметнувате .map() ланци насекаде.
• Може да се користи секаде. Ставете <Each /> во која било компонента на која и треба листа. Еден импорт и готово.

Една важна работа

Children.toArray доделува клучеви врз основа на индексот од низата. Ова функционира одлично за статички листи или листи кои само се прикажуваат. Ако вашите елементи можат да се преместуваат, додаваат или бришат, и секој елемент чува своја состојба (на пример input поле), тогаш треба да користите стабилен уникатен идентификатор како key за да избегнете багови при рендерирање. Во тој случај, можете да ја проширите помошната компонента со опционален keyExtractor проп.

Заклучок

Наместо да расфрлате .map() и key={} низ целиот проект, извлечете ја таа логика во мала компонента наречена Each. Го чисти вашиот JSX, го елиминира предупредувањето за key и ви треба околу 30 секунди за да ја поставите.

Добивај известувања

Најава

Извести ме за

нови коментаринови одговори на мои коментари

Label

{} [+]

Name*

Email*

Website

Label

{} [+]

Name*

Email*

Website

0 Коментари

Најнови

Најстари Со највеќе гласови

Inline Feedbacks

View all comments