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

我如何干掉这个反应/材料ui代码？

1 个答案: