Знаете ли вы, что вы можете использовать крючки в компонентах класса?
Ладно, я вру, вроде. Вы не можете использовать хук непосредственно в компоненте класса, но вы можете использовать хук в обернутом функциональном компоненте с помощью render prop для достижения этой цели. .
Прежде чем продолжить, если вы можете преобразовать свой компонент класса в функциональный компонент, отдайте предпочтение этому. Но если по какой-либо причине компонент должен оставаться компонентом класса, этот шаблон прекрасно работает. Скорее всего, вы столкнетесь с этим сценарием при работе над зрелой кодовой базой React.
Прелесть этого шаблона в том, что вы можете создавать новые компоненты как функциональные компоненты, используя хуки. Компоненты класса, которые по какой-либо причине не могут быть обновлены, пользуются той же функциональностью благодаря тонкому уровню совместимости, компоненту-оболочке.
Давайте сначала создадим крючок.
```javascript
импортировать {useEffect, useState} из "реагировать";
функция экспорта useDarkMode() {
// Взято с https://usehooks.com/useDarkMode/
// Чтобы это сохранялось, мы должны использовать localStorage или какой-либо другой тип
// способа сохранения между сессиями.
// см. напр. https://usehooks.com/useLocalStorage/
const [enabledState, setEnabledState] = useState (false);
константа включена = EnabledState;
использоватьЭффект(() => {
const className = "темный режим";
константный элемент = документ.тело;
если (включено) {
element.classList.add (имя класса);
} еще {
element.classList.remove (имя класса);
}, [включено]);
возврат [включено, setEnabledState];
Теперь давайте создадим функциональный компонент, который имеет свойство рендеринга. Обратите внимание, что реквизит не обязательно должен называться «рендеринг» буквально, но он имеет тенденцию передавать свое назначение.
```jsx
// Обычно я бы не назвал компонент как-то так.
// Это просто для того, чтобы показать, что он делает для целей статьи
const UseDarkModeHookWrapperComponent = ({ render }) => {
const [darkMode, setDarkMode] = useDarkMode (false);
// Использует свойство рендеринга, называемое рендерингом, которое будет отображать значение и
// сеттер для пользовательского хука
вернуть рендер (темный режим, установить темный режим);
А теперь давайте используем компонент-оболочку в компоненте класса.
```jsx
экспорт класса по умолчанию Приложение расширяет компонент {
оказывать() {
вернуть (
<UseDarkModeHookWrapperComponent
render={(darkMode, setDarkMode) => {
вернуть (
<дел
стиль = {{
отображение: "сетка",
gridTemplateColumns: "200px",
разрыв: "2рем",
максимальная ширина: "50%",
placeItems: "центр"
Привет