想要在 react js 的类组件中使用切换器功能？答案

【问题标题】：Want to use switcher function in class component of react js?想要在 react js 的类组件中使用切换器功能？
【发布时间】：2021-02-08 15:47:04
【问题描述】：

我无法在我的 react 应用程序中使用此切换器方法。这是使用类组件构建的建议我在类组件中使用 useThemeSwitcher() 函数的切换器方法。

如何在我的网络应用程序中使用或（编写）此功能。???

在此方法中，切换器功能用于功能组件中..

import React from "react";
import "./App.css";
import { useThemeSwitcher } from "react-css-theme-switcher";
import { Switch } from "antd";

function App() {
 const [isDarkMode, setIsDarkMode] = React.useState("false");
  const { switcher, themes } = useThemeSwitcher();


const toggleTheme = (isChecked) => {
setIsDarkMode(isChecked);
switcher({ theme: isChecked ? themes.dark : themes.light })
 };

return (
<div className="main fade-in">
 
  <Switch checked={isDarkMode} onChange={toggleTheme} />

</div>
  );
}
export default App;

我想在这段代码中使用切换器功能..

import React from "react";
import { Layout, Button, Menu, Popconfirm, Dropdown, Select } from 'antd';
import { useThemeSwitcher } from "react-css-theme-switcher";
import { Switch, Input } from "antd";

class Header extends React.Component {
    constructor(props) {
        super(props);
        this.toggleTheme = this.toggleTheme.bind(this);
        this.state = {
            isDarkMode:false,            
        };
    }
    


 toggleTheme = (isChecked)=>
 {
   this.setState({isDarkMode:isChecked ? true : false})
 }
    
    render() {
      
        return (
            <div className="main fade-in">
               <Switch checked={this.state.isDarkMode} onChange={this.toggleTheme} />
              </div>
          )
    }
}

export default Header;

【问题讨论】：

useThemeSwitcher 是一个钩子。您不能在基于类的组件中使用。检查基于库类的方法

标签： javascript reactjs react-native antd ant-design-pro

【解决方案1】：

由于它是一个钩子，您需要在功能组件中使用它。只需将您的类组件转换为函数式组件即可。

const Header = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);
  // Now we can use it
  const { switcher, themes } = useThemeSwitcher();

  return <div className="main fade-in">
    <Switch checked={this.state.isDarkMode} onChange={setIsDarkMode} />
  </div>;
};

【讨论】：