Javascript 如何干燥此反应/材料ui代码？

这里有很多重复，但我似乎无法清理它并让它工作。特别是switch语句。我真的需要这个吗？然而，似乎它需要通过这种方式传递给博物馆调色板。此外，这些主题常量是否可以放在另一个文件中，然后导入？如果是这样的话，我还没有成功地做到这一点

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)

import React，{Component}来自'React'；
进口{
平卡100，
平卡200，
平卡400，
青色500，
青色700，
灰色100，
灰色300，
灰色400，
灰色500，
grey600，
黑色，
全黑，
全白，
白色
}来自“材质ui/样式/颜色”；
从“material ui//utils/colorManipulator”导入{fade}；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“材质ui/styles/GetMuiteme”导入GetMuiteme；
从“react router dom”导入{BrowserRouter，Route}；
从'react redux'导入{connect}；
将*作为动作从“../actions”导入；
从“./头”导入头；
从“./Landing”导入着陆；
const muiThemeLight=getMuiTheme({
调色板：{
原色1：青色500，
原色2：青色700，
原色3：灰色400，
Accent1颜色：pinkA200，
Accent2颜色：灰色100，
Accent3颜色：灰色500，
textColor:darkBlack，
alternateTextColor:白色，
画布颜色：白色，
边框颜色：灰色300，
禁用颜色：淡入淡出（黑色，0.3），
pickerHeaderColor:cyan500，
时钟圈颜色：褪色（黑色，0.07），
阴影颜色：全黑
}
});
const muithemeduck=getMuiTheme({
调色板：{
原色1：青色700，
原色2：青色700，
原色3：灰色600，
Accent1颜色：pinkA200，
accent2Color:pinkA400，
accent3Color:pinkA100，
textColor:fullWhite，
第二种文本颜色：褪色（全白色，0.7），
alternateTextColor:“#303030”，
画布颜色：“#303030”，
边框颜色：褪色（全白色，0.3），
禁用颜色：褪色（全白色，0.3），
pickerHeaderColor：褪色（全白色，0.3），
时钟圈颜色：淡入淡出（全白色，0.12）
}
});
类应用程序扩展组件{
componentDidMount（）{
this.props.fetchUser（）；
}
render（）{
切换（this.props.muiTheme.theme）{
“lightTheme”案例：
返回(
);
“黑暗主题”案例：
返回(
);
违约：
返回(
);
}
}
}
函数mapstatetops（{form，muiTheme，auth}）{
返回{form，muiTheme，auth}；
}
导出默认连接（MapStateTrops、操作）（应用程序）

)

render（）{
const theme=this.props.muiTheme.theme=='darkTheme'？muithemedirk:muiThemeLight
返回(
);
}

更新：请注意，此代码将原始答案中的代码展平，而原始答案中只有两个选项。如果需要多个选项，那么最好使用一个对象来跟踪主题

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

render（）{
常量输入HEMAP={
黑暗主题：黑暗的博物馆，
灯光主题：音乐灯光，
森林主题：博物馆绿地，
阳光主题：音乐黄
};
const theme=inputHemeMap[this.props.muiTheme.theme]| | muiThemeLight；
返回(
);
}

render（）{
const theme=this.props.muiTheme.theme=='darkTheme'？muithemedirk:muiThemeLight
返回(
);
}

更新：请注意，此代码将原始答案中的代码展平，而原始答案中只有两个选项。如果需要多个选项，那么最好使用一个对象来跟踪主题

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

render（）{
常量输入HEMAP={
黑暗主题：黑暗的博物馆，
灯光主题：音乐灯光，
森林主题：博物馆绿地，
阳光主题：音乐黄
};
const theme=inputHemeMap[this.props.muiTheme.theme]| | muiThemeLight；
返回(
);
}

谢谢您的帮助！我试过有条件三元路由，但肯定没有完全正确。如果我将来添加另一个主题选项，是否有办法向这种类型的语句添加更多条件，或者返回到switch语句？@D.Wall否，您可以使用对象跟踪选项。我已经更新了多个选项的答案。再次感谢！这正是我想做的！谢谢你的帮助！我试过有条件三元路由，但肯定没有完全正确。如果我将来添加另一个主题选项，是否有办法向这种类型的语句添加更多条件，或者返回到switch语句？@D.Wall否，您可以使用对象跟踪选项。我已经更新了多个选项的答案。再次感谢！这正是我想做的！