Как вынести переиспользуемый блок кода?

Question

[tostershmoster]

Такой компонент

const Comp = () => (
  <div>
    <ul>
      <li>
        <h2>Cap1</h2>
        <p>Text1</p>
      </li>
      <li>
        <h2>Cap2</h2>
        <p>Text2</p>
      </li>
    </ul>
  </div>
);

Сейчас в нём 2 li но может быть и больше, нужно вынести li в переиспользуемый блок. Не понятно только как правильно это сделать. На отдельный компонент в отдельном файле это как-то не тянет. Оставить его тут же, только выше?

const LiItem = () => {
  <li>
    <h2>Cap1</h2>
    <p>Text1</p>
  </li>
}

const Comp = () => (
  <div>
    <ul>
      constants.map(item => LiItem)
    </ul>
  </div>
);

Answer 1

[chemdev]

const data = [{header: "1", text: "1"}, {header: "2", text: "2"}]
const LiItem = ({header, text}) => (
  <li>
    <h2>{header}</h2>
    <p>{text}</p>
  </li>
)

const Comp = () => (
  <div>
    <ul>
      {data.map((el, idx) => <LiItem key={idx} header={el.header} text={el.text} />)}
    </ul>
  </div>
);

Comments

[Алексей Уколов]

Не нужно только в key использовать индекс массива, ключ должен быть жёстко связан с конкретным элементом массива независимо от его положения внутри.

[chemdev]

Алексей Уколов, ого, не знал, спасибо. Подскажете как в данном случае лучше поступить? У нас же нет гарантий что не будет одинакового текста либо заголовка. Имеется ввиду ставить ключом какой-нибудь идентификатор, которые приходит с бэка?

[chemdev]

Алексей Уколов, собственно почитал уже сам, вот кому интересно:

Крайний случай для использования индекса массива как ключа

Документация

[Алексей Уколов]

Ну да, что-то уникальное для элемента нужно использовать. В случае, если такого поля или набора полей нет и всё же есть вероятность коллизий, то можно конкатенировать индекс и текст.

[tostershmoster]

chemdev, На беке должны быть id-шки. В данном случае можно в data добавить

Answer 2

[Алексей Уколов]

"Правильного" варианта тут нет, делайте как вам удобнее.

Я бы для такой простой штуки не стал заморачиваться и сделал так (детали с пропсами опущены):

const Comp = () => (
  <div>
    <ul>
      constants.map((item) => (
        <li>
          <h2>Cap1</h2>
          <p>Text1</p>
        </li>
      ))
    </ul>
  </div>
);

P.S. Если всё же разделять, я бы тег li оставил в родительском компоненте, а в отдельный вынес только его содержимое. Таким образом жёстко связанные в семантике html теги не будут разнесены потенциально по разным файлам.

Comments

[tostershmoster]

h2 и p?

[Алексей Уколов]

Содержимое li.

[Alexandroppolus]

я бы тег li оставил в родительском компоненте, а в отдельный вынес только его содержимое. Таким образом жёстко связанные в семантике html теги не будут разнесены потенциально по разным файлам.

с другой стороны, если обернуть LisItem в React.memo, можно изрядно уменьшить ререндер при изменении списка. И чем больше всего мы вынесем в LisItem, тем легковеснее будет ререндер для Comp

[Алексей Уколов]

Alexandroppolus, для меня семантика и переиспользуемость намного важнее производительности до тех пор, пока я с этой производительностью не увижу проблем (вёрстки внутри должно быть ну очень много, чтобы мы их заметили).
Но замечание справедливое.