zoukankan      html  css  js  c++  java
  • [React] Use React Context to Manage Application State Through Routes

    We’ll create a Router component that will wrap our application and manage all URL related state. We’ll see how we can use React’s built in context mechanism to pass data and functions between components without having to pass props all the way down through the component tree.

    // index.js
    
    ReactDOM.render(
        <MuiThemeProvider>
            <Router><App /></Router>
    </MuiThemeProvider>, document.getElementById('root'));

    On the top level, we add Router component to wrap our App component.

    export class Router extends Component {
        state = {
            route: getCurrentPath()
        };
    
        handleLinkClick = (route) => {
            this.setState({route});
            history.pushState(null, '', route);
        };
    
        static childContextTypes = {
            route: React.PropTypes.string,
            linkHandler: React.PropTypes.func
        };
    
        getChildContext() {
            return {
                route: this.state.route,
                linkHandler: this.handleLinkClick
            };
        }
    
        render() {
            return (
              <div>{this.props.children}</div>
            );
        }
    }

    We need to pass the props to the children so that Link component can know current url state. To do this, we using 'Context' instead of 'passing the props down to children'.

    Becasue there are two problems with this. One, in a complex app, that could potentially mean passing the same item down many levels. This could mean a lot of maintenance if things need to change.

    The second problem is that, in this setup, app is being placed inside the router through a call to this.props.children. We can't just add props onto the app component in our render function. The way we're going to handle this is through React's context mechanism.

    import React, {Component} from 'react';
    
    const styles = {
        padding: '8px'
    };
    
    export class Link extends Component {
    
        static contextTypes = {
            route: React.PropTypes.string,
            linkHandler: React.PropTypes.func
        };
    
        render() {
            const activeClass = this.context.route === this.props.to ? 'active': '';
            const handleClick = (ev) => {
                ev.preventDefault();
                this.context.linkHandler(this.props.to);
            };
    
            return (
                <a href="#" style={styles} className={activeClass} onClick={handleClick}>{this.props.children}</a>
            );
        }
    }
    
    
    Link.PropTypes = {
        to: React.PropTypes.string.isRequired
    };

    Last, in the Link component, we can use the Context to access what we have defined for Router compoent.

  • 相关阅读:
    mysql 获取字符串的长度
    mysql 字符类以及重复元字符
    mysql 字段拼接
    mysql 去除字符串中的空格
    mysql 正则表达式
    mysql 选出前五个元素
    mysql regexp 表达式
    mysql 选择所有同学名字
    mysql 获取数学成绩最高以及最低的同学
    mysql 获取单个科目的平均分
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6362954.html
Copyright © 2011-2022 走看看