想在 React js 的 class 组件中使用切换器功能？

Question

我无法在我的 React 应用程序中使用此切换器方法。这是使用 class 个组件构建的建议我在 class 组件中使用 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;

Answer 1

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

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

想在 React js 的 class 组件中使用切换器功能？

Want to use switcher function in class component of react js?

javascript

reactjs

react-native

antd

ant-design-pro