В предыдущей статье мы рассмотрели, что такое Context и как с ним передавать значения. В этой статье мы рассмотрим обновление значения контекста из дочернего компонента. Для нашего примера темы это означает, что нажатие кнопки теперь будет переключать тему между светлой и темной.
Обновление значения контекста
В предыдущей статье мы напрямую передавали тему через компонент Provider. Хотя значение передается компонентам ThemeButton.js и ThemeWindow.js, мы не можем обновить это значение.
Чтобы переключаться между двумя типами тем, нам также нужно передать функцию. Эта функция позволит нам переключаться между обеими темами.
Поэтому нам нужно передать эту функцию вместе с темной темой через компонент Provider. Для этого мы можем создать объект с состоянием, который будет содержать как тему, так и функцию. Таким образом, React может отслеживать тему и выполнять необходимые повторные рендеры при ее обновлении.
Это довольно просто. Объект с состоянием, содержащий тип темы и функцию, передается через компонент Provider. В то время как компонент ThemeWindow нуждается лишь в незначительных изменениях, нам необходимо реализовать функцию в компоненте ThemeButton.
Реализация функции переключения темы
Ничего особенного для реализации функции делать не нужно. Вызов его при нажатии кнопки изменит тему.
Так просто. При нажатии этой кнопки будет выполнена функция switchTheme(). Это обновит значение с сохранением состояния и, таким образом, вызовет повторную визуализацию. И, наконец, обновленная тема будет отображаться в компоненте ThemeWindow.
Подведение итогов
Это был вывод к предыдущей статье о React Context. Как вы видели, React Context — мощный инструмент.
Однако этот простой пример на самом деле не демонстрирует его мощь. В сложных приложениях с десятками компонентов, где значения и состояние необходимо передавать нескольким различным компонентам, React Context сделает эту работу намного проще, чем обычные реквизиты.
Первоначально опубликовано в моем блоге.
