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.

  • 相关阅读:
    Ajax实现表单验证
    JDK配置环境变量
    Java判断指定日期是星期几
    坚持不懈,直到成功
    Struts Action返回xml
    springMVC获得HttpServletRequest对象
    Ubuntu添加eclipse快捷方式
    如何给tomcat 7.0.32添加用户
    使用FusionCharts Free显示图表(JSP)
    Simulate a Windows Service using ASP.NET to run scheduled jobs
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6362954.html
Copyright © 2011-2022 走看看