• [React] Recompose: Theme React Components Live with Context


    SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our theme variables on the context of our app and then read them from individual components in order to make styling decisions. Recompose allows us to create the helper functions we need to do this yielding concise, functional declarative UI components. These components will respond in real time to changes in the theme.

    We have a default theme file:

    export default {
        color: {
            keyColor: '#3f8bae',
            textLight: '#fff',
        },
        number: {
            buttonRadius: 5
        },
        string: {
            mainFontFamily: 'sans-serif'
        }
    }

    We want Component get defualt theme according to the file.

    We will build an interface to update theme according to user input.

    We can import theme file into the App.js compoent and pass down to the custom component. The problem is that, if we have hunders components, it is not ideal to passdown the props hundres times.

    That's why we need context.

    We can use 'recompose' to do that:

    import React, { Component } from 'react';
    import {compose, withState} from 'recompose';
    
    import myDefaultTheme from './themes/default';
    import Button from './components/Button';
    
    class App extends Component {
        static childContextTypes = {
            theme: React.PropTypes.object
        };
    
        getChildContext() {
            return {theme: this.props.theme}
        }
    
        render() {
            const {theme, updateTheme} = this.props;
            return (
                <div className="App">
                    <main className="container">
                        ...
                    </main>
                </div>
            );
        }
    }
    
    const enhance = compose(
        withState('theme', 'updateTheme', myDefaultTheme)
    );
    export default enhance(App);

    So for this part of code:

    const enhance = compose(
        withState('theme', 'updateTheme', myDefaultTheme)
    );
    export default enhance(App);

    We wrap our App component with 'enhance' to update component props. 

    widthState function: Passes two additional props to the base component: a state value, and a function to update that state value. so 'updateTheme' will take nextProps to udpate current props.

        static childContextTypes = {
            theme: React.PropTypes.object
        };
    
        getChildContext() {
            return {theme: this.props.theme}
        }

    Those code helps us to pass 'theme' down to children components. 

    Also need to create a file called "hocs.js" which means high order component. This file contains reusable methods to update the custom component.

    To get context from 'App.js', we need 'getContext' method form 'recompose':

    export const getTheme = getContext({
                                           theme: PropTypes.shape({
                                                                      color: PropTypes.object,
                                                                      number: PropTypes.object,
                                                                      string: PropTypes.object
                                                                  })
                                       });

    We also need a 'themeStyle' method to update style:

    export const themeStyle = mapThemeToStyle => mapProps(
        props => {
            const { theme, style } = props;
    
            return {
                ...props,
                style: [
                    mapThemeToStyle(theme, props),
                    style
                ]
            };
        }
    );

    It takes a updater function called 'mapThemeToStyle' which can map theme to style according to different components needs.

    Now in the custom component, let compose those:

    import React from 'react';
    import {
        mapProps,
        compose,
        defaultProps,
        setDisplayName,
        componentFromProp
    } from 'recompose';
    import Radium from 'radium';
    
    import {
        getTheme,
        themeStyle,
        addStyle
    } from './hocs';
    
    const mapThemeToStyle = ({
                                color,
                                number,
                                string
                             }) => {
        return {
            ...(color.keyColor &&
                {backgroundColor: color.keyColor} || {}
            ),
            color: color.textLight,
            borderRadius: number.buttonRadius,
            fontFamily: string.mainFontFamily
        };
    };
    
    const style = {
        backgroundColor: 'red',
        borderWidth: 0,
        borderStyle: 'solid',
        boxSizing: 'border-box',
        fontFamily: 'sans-serif',
        fontSize: 18,
        borderRadius: 3,
        fontWeight: 100,
        padding: 12,
        verticalAlign: 'middle',
        whiteSpace: 'nowrap',
        color: 'white',
        alignItems: 'center',
        justifyContent: 'center',
        textDecoration: 'none',
        display: 'flex',
        flex: 1,
        cursor: 'pointer',
        ':hover': {
            backgroundColor: 'purple'
        }
    };
    
    const enhance = compose(
        getTheme, // using the container's defined theme
        themeStyle(mapThemeToStyle), // apply the default theme to the component
        addStyle(style),
        setDisplayName('Button'),
        defaultProps({
            element: 'button'
                     }),
        Radium
    );
    export default enhance(componentFromProp('element'));
  • 相关阅读:
    【AtCoder】AGC002
    【AtCoder】ARC059
    【AtCoder】AGC003
    【AtCoder】ARC060
    ES6学习总结之Set和Map的使用
    phaser学习总结之Text详解
    javascript实现数组排序的方法
    phaser学习总结之phaser入门教程
    javascript中字符串常用的方法和属性
    javascript中数组常用的方法和属性
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6523001.html
Copyright © 2020-2023  润新知