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

Question

[Zukrine]

Пишу читалку книг на react. Естественно, должно быть две странички. Как реализовал я: общий компонент, который содержит в себе два других компонента

Пример

const Pages = () => {
    return (
        <div className="Pages">
            <LeftPage/>
            <RightPage/>
        </div>
    );
};

В каждую страничку пока передаю данные из json файла. Мне бы хотелось понять, как лучше сделать так, чтобы данные сразу шли на первую страничку, потом, по достижению предела, переносились на вторую. И это у меня не получается.
Что пробовал:
1) Через if else, ставя ограничение на страницу по количеству символов (data.text.length). Предполагал, что после достижения лимита отрендерится компонент второй странички, но не вышло.
2) Различные ухищрения с if else, опять же. Результат не порадовал.
Что думаю:
- Получать данные из json и сохранять их в массив, который будет делиться по частям, но такой способ мне кажется излишним, так как при увеличении шрифта будет менятся количество символов на страницу.
- Использовать append.

А есть ли еще варианты? Извините за нубский вопрос, react только только начинаю учить.

Answer 1

[Kentavr16]

Советую просто поиграть со свойством scroll при установленном overflow: hidden. вот тебе пример. (Листание по клику на первый див.)
А динамически вычислять сколько текста влезет на страничку при изменении расширения, размера текста и тд - дело неблагодарное.
Пример написал на чистом js, но в реакте будет еще проще как по мне. Что-то вроде продублировать компонент который рендерит страничку, установив другое значение скролла.

Comments

[Zukrine]

Попробую, спасибо