Material UI Switch 无 UI 变化答案

【问题标题】：Material UI Switch no UI changeMaterial UI Switch 无 UI 变化
【发布时间】：2021-03-06 13:03:26
【问题描述】：

我正在使用 Material UI 的开关来更改多页应用程序的主题。发生的唯一错误是开关不会从左向右移动（不会出现 ui 功能），但 onChange 功能工作正常。我玩了一下，结果发现当我删除 forceUpdate() 时，材质 ui 开关将起作用，但不会重新渲染组件。 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>
        )
    }
}

【问题讨论】：

标签： reactjs react-router material-ui react-router-dom uiswitch

【解决方案1】：

您没有使用状态，如果您不传递新状态，则 UI 不会重新呈现

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

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

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

取自 react doc 的解释它的作用基本上是强制渲染你应该避免使用的组件并从道具和状态中读取

【讨论】：