• [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'));
  • 相关阅读:
    可持久化BCJ
    Codeforces 911 三循环数覆盖问题 逆序对数结论题 栈操作模拟
    找不同
    最接近的三数之和
    找到所有数组中消失的数字
    三数之和
    小程序中的变量
    二叉树的最近公共祖先
    深拷贝和浅拷贝
    下载安装JDK
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6523001.html
Copyright © 2020-2023  润新知