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

【问题标题】：React - How to convert a simple function to a class?React - 如何将一个简单的函数转换为一个类？
【发布时间】：2021-04-15 22:22:24
【问题描述】：

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

【问题讨论】：

useDarkMode 是一个钩子，是一个旨在与侧面功能组件一起使用的范例。您必须将 useDarkMode 中的逻辑提取为可重用的模式，如 HOC 或其他形式的状态管理。

标签： javascript reactjs function class components

【解决方案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>
    )
}

【讨论】：

【解决方案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>;
    }
}

【讨论】：

如果 MyContent 类位于不同的文件中怎么办？我怎样才能重新分解它？
没问题。您可以将 MyContent 类作为不同的文件。