Невозможно использовать переключатель для темного режима в Material-ui

Question

Я попытался включить этот код в свой файл для включения темного режима для моего сайта реакции. Но, к сожалению, этот код не работает. Я пытался поместить код внутри функции рендеринга, но он все равно показывает эту ошибку. Кто-нибудь может предложить лучший способ поместить этот код.

import React ,{useState} from 'react';

import styles  from './App.module.css';

import titleImage from './images/image.png'; 
import { Paper ,Switch  } from '@material-ui/core';
import {ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

class App extends React.Component{
    const [darkMode, lightMode] = useState (false);
    const theme = createMuiTheme ({
        palette:{
            type: darkMode ? "dark" : "light",
        },
    });
    render(){
        const { data ,country } = this.state;
        return(
            <ThemeProvider theme = {theme}>
                <Paper>
                    <div className={styles.container}  >
                        <img className={styles.image} src={titleImage} alt="COVID-19" />
                          <Switch checked ={darkMode} onChange = {() => setDarkMode(!darMode) }


                    </div>
                </Paper>
            </ThemeProvider> 
       )
    }
}

export default App;

{PS - Я не могу изменить код, который включает функцию рендеринга, так как это только часть всего кода. }

Answer 1

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

class App extends React.Component{
   // const [darkMode, lightMode] = useState (false);
    state = {darkMode: false, data: '', country: ''};

    render(){
        const { data ,country, darkMode } = this.state;
        const theme = createMuiTheme ({
          palette:{
             type: darkMode ? "dark" : "light",
          },
        });

        return(
            <ThemeProvider theme = {theme}>
                <Paper>
                    <div className={styles.container}  >
                        <img className={styles.image} src={titleImage} alt="COVID-19" />
                          <Switch checked ={darkMode} onChange = {() => this.setState({darkMode: !darkMode}) }


                    </div>
                </Paper>
            </ThemeProvider> 
       )
    }
}

Answer 2

Вы используете ловушку в компоненте класса. Вы должны использовать хуки только в функциональном компоненте, таком как

import React ,{useState} from 'react';
import styles  from './App.module.css';
import titleImage from './images/image.png'; 
import { Paper ,Switch  } from '@material-ui/core';
import {ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const App = () => {
    const [data, setData] = useState ([]);
    const [country, setCountry] = useState ('');
    const [darkMode, setDarkMode] = useState (false);

    const theme = createMuiTheme ({
        palette:{
            type: darkMode ? "dark" : "light",
        },
    });

    const toggleDarkMode = () => setDarkMode(!darMode);

    return(
        <ThemeProvider theme = {theme}>
            <Paper>
                <div className={styles.container}  >
                    <img className={styles.image} src={titleImage} alt="COVID-19" />
                        <Switch checked ={darkMode} onChange={toggleDarkMode} />
                </div>
            </Paper>
        </ThemeProvider> 
    )
}

export default App;