[React] Use React Context to Manage Application State Through Routes

Posted Answer1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[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.

 

以上是关于[React] Use React Context to Manage Application State Through Routes的主要内容,如果未能解决你的问题,请参考以下文章

react 使用context

React/React Context API:使用 useEffect() 钩子时等待上下文值

在 React 中将数据从孙子传递给父母

[react] 在React怎么使用Context?

使用react hook和react context创建dialog组件

React Context用法总结