我怎麼能幹涸這種反應/材料UI代碼？

Question

這裏有被重複了很多，但我似乎無法把它清理乾淨，並有它的工作。具體來說，switch語句。我真的需要這個嗎？然而，似乎它需要通過muiTheme調色板這樣。另外，這些主題常量可以放在另一個文件，然後導入？如果是這樣，我還沒有成功。

import React, { Component } from 'react'; 
import { 
    pinkA100, 
    pinkA200, 
    pinkA400, 
    cyan500, 
    cyan700, 
    grey100, 
    grey300, 
    grey400, 
    grey500, 
    grey600, 
    darkBlack, 
    fullBlack, 
    fullWhite, 
    white 
} from 'material-ui/styles/colors'; 
import { fade } from 'material-ui//utils/colorManipulator'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import { BrowserRouter, Route } from 'react-router-dom'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions'; 

import Header from './Header'; 
import Landing from './Landing'; 

const muiThemeLight = getMuiTheme({ 
    palette: { 
     primary1Color: cyan500, 
     primary2Color: cyan700, 
     primary3Color: grey400, 
     accent1Color: pinkA200, 
     accent2Color: grey100, 
     accent3Color: grey500, 
     textColor: darkBlack, 
     alternateTextColor: white, 
     canvasColor: white, 
     borderColor: grey300, 
     disabledColor: fade(darkBlack, 0.3), 
     pickerHeaderColor: cyan500, 
     clockCircleColor: fade(darkBlack, 0.07), 
     shadowColor: fullBlack 
    } 
}); 

const muiThemeDark = getMuiTheme({ 
    palette: { 
     primary1Color: cyan700, 
     primary2Color: cyan700, 
     primary3Color: grey600, 
     accent1Color: pinkA200, 
     accent2Color: pinkA400, 
     accent3Color: pinkA100, 
     textColor: fullWhite, 
     secondaryTextColor: fade(fullWhite, 0.7), 
     alternateTextColor: '#303030', 
     canvasColor: '#303030', 
     borderColor: fade(fullWhite, 0.3), 
     disabledColor: fade(fullWhite, 0.3), 
     pickerHeaderColor: fade(fullWhite, 0.3), 
     clockCircleColor: fade(fullWhite, 0.12) 
    } 
}); 

class App extends Component { 
    componentDidMount() { 
     this.props.fetchUser(); 
    } 

    render() { 
     switch (this.props.muiTheme.theme) { 
      case 'lightTheme': 
       return (
        <MuiThemeProvider muiTheme={muiThemeLight}> 
         <BrowserRouter> 
          <div> 
           <Header /> 
           <Route exact path="/" component={Landing} /> 
          </div> 
         </BrowserRouter> 
        </MuiThemeProvider> 
       ); 
      case 'darkTheme': 
       return (
        <MuiThemeProvider muiTheme={muiThemeDark}> 
         <BrowserRouter> 
          <div> 
           <Header /> 
           <Route exact path="/" component={Landing} /> 
          </div> 
         </BrowserRouter> 
        </MuiThemeProvider> 
       ); 
      default: 
       return (
        <MuiThemeProvider muiTheme={muiThemeLight}> 
         <BrowserRouter> 
          <div> 
           <Header /> 
           <Route exact path="/" component={Landing} /> 
          </div> 
         </BrowserRouter> 
        </MuiThemeProvider> 
       ); 
     } 
    } 
} 

function mapStateToProps({ form, muiTheme, auth }) { 
    return { form, muiTheme, auth }; 
} 
export default connect(mapStateToProps, actions)(App) 

;

Answer 1

render() { 
    const theme = this.props.muiTheme.theme === 'darkTheme' ? muiThemeDark : muiThemeLight 
    return (
     <MuiThemeProvider muiTheme={theme}> 
      <BrowserRouter> 
       <div> 
        <Header /> 
        <Route exact path="/" component={Landing} /> 
       </div> 
      </BrowserRouter> 
     </MuiThemeProvider> 
    ); 
} 

更新：注意，此代碼平展在原來的答案其中只有兩個選項的代碼。如果需要多個選項，那麼這將是最好的使用對象跟蹤的主題。

render() { 
    const inputThemeMap = { 
     darkTheme: muiThemeDark, 
     lightTheme: muiThemeLight, 
     forestTheme: muiThemeGreen, 
     sunlightTheme: muiThemeYellow 
    }; 

    const theme = inputThemeMap[this.props.muiTheme.theme] || muiThemeLight; 

    return (
     <MuiThemeProvider muiTheme={theme}> 
      <BrowserRouter> 
       <div> 
        <Header /> 
        <Route exact path="/" component={Landing} /> 
       </div> 
      </BrowserRouter> 
     </MuiThemeProvider> 
    ); 
}