Создание клона WhatsApp с помощью Next.js Часть 12 Рендеринг сообщений

"Исходный код"

В последней части вы можете видеть, что поле ввода не находится внизу, так как окно сообщений еще не создано и занимает все пространство. Итак, в этой части мы сосредоточимся на создании ‹MessageContainer›, а также на рендеринге некоторых фиктивных сообщений.

СообщенияКонтейнер

Чтобы сделать простой MessagesContainer, просто создайте его с отступом, равным 20px, желто-коричневым цветом фона и с flex, равным 1, чтобы занять все пространство.

const MessagesContainer = styled.div`
padding:20px;
background-color:#e5ded8;
flex:1;
`;

Мы добавляем это между ‹Header› и ‹InputContainer›

</Header>
<MessagesContainer />
<InputContainer>

Импорт фиктивных сообщений

В папку данных мы добавляем messages.json.

Файл messages.json содержит объект сообщения, который имеет свойства id, message, user, photoURL и timestamp .

Визуализировать сообщения

Вернитесь к ChatContent.js, импортируйте сообщение из файла.

import messages from '../data/messages.json';

Между MessagesContainer

<MessagesContainer>
{messages.map(message=><div key={message.id}>{message.message}</div>)}
</MessagesContainer>

Теперь вы можете видеть сообщения, отображаемые в MessagesContainer.

Подписывайтесь на нас: Курсы Gumroad, YouTube, Medium, Udemy, Linkedin, Twitter, Instagram

Дополнительные материалы на plainenglish.io