Блог

Я использую переключатель пользовательского интерфейса Material для изменения тем в многостраничном приложении. Единственная ошибка, которая возникает, это то, что переключатель не перемещается слева направо (функциональность пользовательского интерфейса не выполняется), но функциональность onChange работает нормально. Я поиграл с этим, оказывается, что когда я удаляю forceUpdate(), переключатель пользовательского интерфейса материала будет работать, но компонент не будет повторно отображен. Что в forceUpdate мешает работе функциональности коммутатора?

App.tsx :

 import React from "react"
import {Switch, Route, BrowserRouter, Redirect} from "react-router-dom"
import Main from "./Main"
import {createMuiTheme, ThemeProvider} from "@material-ui/core";

class App extends React.Component<any, any>{

darkmode=true

theme=createMuiTheme({
    palette:{
        type:this.darkmode?"dark" : "light"

    },
})

changeTheme=()=>{
    this.darkmode=!this.darkmode;
   
    this.theme = createMuiTheme({
        palette:{
            type:this.darkmode?"dark" : "light"
        }
    })
    this.theme.spacing(10)
    this.forceUpdate()
}


render(){
    return(
       
   
           <div>
                <BrowserRouter>
                    <Switch>
                        <Route  path="/" component={()=>
                            <Main theme={this.theme} changeTheme={this.changeTheme} />
                        }
                                                    
                    </Switch>
                </BrowserRouter>

           </div>

       

    )
}
 

}

Main.tsx:

 class Main extends React.Component<any,any>{
    render(){
        return(
            <div>
                <Switch onChange={()=>this.props.changeTheme()}></Switch>
                <Switch></Switch>
            </div>
        )
    }
}
 

вы не использовали состояния, пользовательский интерфейс не будет повторно отображаться, если вы не передадите новое состояние

   constructor(props) {
    super(props);
    this.state = {darkmode: true};
  }
this.setState({
      darkmode: !darkmode
    });
 

здесь вам помогут два фрагмента кода: первый — при инициализации состояния
, а второй — при обновлении

По умолчанию, при изменении состояния или реквизита вашего компонента, ваш компонент будет повторно отображаться. Если ваш метод render() зависит от каких-то других данных, вы можете сообщить React, что компонент нуждается в повторной визуализации, вызвав forceUpdate() .

возьмите из react doc, в котором объясняется, что он делает, в основном, это принудительный принудительный компонент, которого вам следует избегать, чтобы все использовать и выполнять чтение из реквизитов и состояния