物料UI切换没有UI更改

Question

我正在使用Material UI的开关来更改多页应用程序上的主题。发生的唯一错误是开关没有从左向右移动(ui功能没有发生(，但onChange功能运行良好。我试过它，结果发现当我删除forceUpdate((时，材质ui开关会工作，但组件不会被重新渲染。是什么强制更新阻止了交换机功能的工作？

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

Answer 1

您没有使用状态，如果您没有通过新的状态，UI将不会重新发送

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

这里的两段代码将帮助您初始化状态的第一段代码第二个是更新

默认情况下，当组件的状态或道具发生更改时，组件将重新渲染。如果render((方法依赖于其他数据，则可以通过调用forceUpdate((来告诉React组件需要重新渲染。

从react文档中获取解释它所做的基本上是强制重新编写你应该避免使用的组件，并从道具和状态中读取