Нанести на карту массив объектов и отобразить другой элемент в определенной позиции.

Question

Я не уверен, понятен ли мой заголовок.

Я работаю над блогом и в настоящее время отображаю список сообщений на главной странице. Визуально я использую flexbox со строками из 3 статей.

Для этого я просто сопоставляю массив сообщений, которые являются объектами со всей информацией о сообщении. Знайте, я sh добавлю новостной блок blo c рядом со вторым постом, заменив третий пост, а третий пост будет просто перенесен и go на следующую строку.

Мой код в настоящее время:

<section className="post-feed">
   {currentList.slice(1).map(({ node }) => (
     // The tag below includes the markup for each post 
        components/common/PostCard.js
     // eslint-disable-next-line react/jsx-key
        <PostCard key={node.id} post={node} />
    ))}
</section>

Я не уверен, как я могу вставить другой компонент в этот список.

Answer 1

Вы можете использовать ключ карты, чтобы узнать, когда он находится в 3-й позиции:

<section className="post-feed">
   {currentList.slice(1).map(({ node }, key) => (
        <>
            { key === 2 && <NewsletterComponent />}
            <PostCard key={node.id} post={node} />
        </>
    ))}
</section>

Answer 2

Я бы go при таком подходе:

Напишите оператор if внутри вашей функции карты, который проверяет, является ли текущий элемент, над которым циклически отображается функция карты, последним / третьим (я полагаю, что последний = в третьих). В этом случае визуализируйте / верните компонент / блок информационного бюллетеня.

Попробуйте и дайте мне знать, подходит ли он.