Как использовать хук в компоненте класса

Знаете ли вы, что вы можете использовать крючки в компонентах класса?

Ладно, я вру, вроде. Вы не можете использовать хук непосредственно в компоненте класса, но вы можете использовать хук в обернутом функциональном компоненте с помощью 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: "центр"

Привет