Здравствуйте, я только начал изучать реакт пока не могу понять как правильно сделать. У меня есть несколько картинок-кнопок в ряд, кнопка по нажатию на которую у меня появляется окно, в котором по кругу вертятся страницы внизу с комментариями, и если я например просмотрел все страницы и хочу перейти на следующую кнопку то кнопка должна становиться зеленой. Я не могу понять каким образом мне это можно реализовать.Подскажите как это можно сделать?
У тебя есть централизованное решение для управления состоянием? Типа redux, mobx, flux итд?
Честно говоря это большое проект я пока только начал разбираться, вроде как есть
Тебе нужно придумать как смоделировать состояние в виде структур данных. Потом описать состояние rexus/flux, и привязать измнение состояние к UI.
Например.
Модель состояния
{
allCommentsViewed: false
}
Потом есть компонент который отвечает за то чтобы установить состояние о просмотренности всех комментариев отражалось в централизованном состояние. Нужно учесть всякие граничные случаи (изменение размера экрана, наличие 0 или 1 комментария итд), поэтому одного обработчика onScroll не будет достаточно.
function CommentsList() {
store.setAllCommentsViewed(false) // сбрасываем состояние просмотренности комментариев при начальном рендере
return <ul onScroll((event) => {
if (wasLastCommentViewed(event)) {
store.setAllCommentsViewed(true)
}
})>
<li>...</li>
</ul>
}
И компонент кнопки которая будет становиться зеленой (с помощью класса) только при наличии флага в централизованном состоянии:
function Button() {
return <button className={store.allCommentsViewed ? 'green' : ''}>
click next
</button>
}
Спасибо, пока если честно не до конца понятно все но буду пробовать)
Поищи где в проекте встречаются элементы/подходы подобные тем что я описал. В большом проекте подобные вещи должны встречаться.
Сейчас просто все переходит на реакт и пока этого нету, так что я уже искал не нашел