javascript - React - 如何将一个简单的函数转换为一个类？

Question

如何将此代码转换为类组件？问题是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>
}

Answer 1

您不能在类组件中使用钩子。如果要使用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>
    )
}

Answer 2

尝试这样的事情

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>;
    }
}