Программно l oop секция JSX в рамках вывода

Question

Я хотел бы программно повторить часть JSX в выводе. Ниже я хотел бы получить тот же эффект, что и ниже, без повторения компонента PageLeft id = "Diary" 3 раза. Я хотел бы использовать al oop или что-то еще.

const DiaryPages = {

}

  return (
    <Fragment>
     <PageLeftDivider
      />
      <PageRight
  header={bookData[0].pageHeader}
  pageNumber={bookData[0].id}
  htmlContent={bookData[0].htmlContent}
  bookSection={bookData[0].bookSection}
      />

      <PageLeft id="Diary"
        pageHeader={bookData[1].pageHeader}
        pageNumber={bookData[1].id}
        htmlContent={bookData[1].htmlContent}
      />
      <PageLeft id="Diary"
        pageHeader={bookData[1].pageHeader}
        pageNumber={bookData[1].id}
        htmlContent={bookData[1].htmlContent}
      />

      <PageLeft id="Diary"
        pageHeader={bookData[1].pageHeader}
        pageNumber={bookData[1].id}
        htmlContent={bookData[1].htmlContent}
      />


    </Fragment>
  );
}

Answer 1

Если вы хотите визуализировать 3 раза один и тот же компонент, то, я думаю, вы можете использовать .map() для этой цели следующим образом:

return <Fragment>
    {/* your other components */}

    {
       [1,2,3].map(e => <PageLeft id="Diary"
            pageHeader={bookData[1].pageHeader}
            pageNumber={bookData[1].id}
            htmlContent={bookData[1].htmlContent}
       />)
    }
</Fragment> 

Как указано в документации для .map():

Метод map() создает новый массив, заполненный результатами вызова предоставленной функции для каждого элемента в вызывающем массиве.

Технически мы берем каждый элемент из массива - в данном случае 3 элемента, не имеет значения, какие они сейчас - и возвращаем созданный JSX для каждого. Вот как вы можете визуализировать элементы.

Обычно это используется для получения данных из массива, например: id, именования полей из объекта и создания формата визуализации для элементов массива.

Рекомендуется прочитать из документации React: Списки и ключи

Надеюсь, это поможет!

Answer 2

Или, предполагая, что вы хотите <PageLeft /> для каждой записи в вашем массиве bookData, вы можете удалить первую запись с помощью .splice () (так как она уже отображается на <PageRight /> ), а затем используйте .map () .

<>
   {bookData.splice(0,1).map( entry => <PageLeft id={"Diary" + entry.id}
        pageHeader={entry.pageHeader}
        pageNumber={entry.id}
        htmlContent={entry.htmlContent}
      />
   )}
</>

Я добавил id={"Diary" + entry.id}, чтобы каждый <PageLeft /> имел различный идентификатор.

Примечание: <> </> - это просто краткая форма фрагментов реакции