Блог

Главная - Вопросы по программированию - React — Как преобразовать простую функцию в класс?

React — Как преобразовать простую функцию в класс?

#javascript #reactjs #function #class #components

#javascript #reactjs #функция #класс #Компоненты

Вопрос:

Как мне преобразовать этот код в компонент класса? проблема const {value} = useDarkMode (false); в том, что я не понимаю, как применить его в компоненте класса

 import './Content.css'
import useDarkMode from 'use-dark-mode';

export default function Content () {

    const { value } = useDarkMode(false);

    return <div>
        <div className={value ? 'Dark_Mode' : 'Light_Mode'}>
            <h3>Hello from React.JS</h3>
        </div>
    </div>
}

Комментарии:

1. useDarkMode это перехват и парадигма, предназначенная для использования вместе с боковыми функциональными компонентами. Вам нужно будет извлечь логику из useDarkMode в повторно используемый шаблон, такой как HOC или какая-либо другая форма управления состоянием.

Ответ №1:

Попробуйте что-то вроде этого

 import './Content.css'
import React from 'react';
import useDarkMode from 'use-dark-mode';

export default function Content () {

    const { value } = useDarkMode(false);

    return <MyContent value={value} />
}

class MyContent extends React.component{
    render() {
        return <div>
            <div className={this.props.value ? 'Dark_Mode' : 'Light_Mode'}>
                <h3>Hello from React.JS</h3>
            </div>
        </div>;
    }
}

Комментарии:

1. Что делать, если класс MyContent находится в другом файле? как я могу повторно ее проанализировать?

2. Нет проблем. Вы можете создать класс MyContent в виде другого файла.

Ответ №2:

Вы не можете использовать хуки в компоненте класса. Если вы хотите использовать useDarkMode , измените свой класс компонента на функциональный компонент следующим образом:

 export const Content = () => {

    const { value } = useDarkMode(false);

    return (
      <div>
        <div className={value ? 'Dark_Mode' : 'Light_Mode'}>
            <h3>Hello from React.JS</h3>
        </div>
      </div>
    )
}
Метки: