[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的更多相关文章
- [Javascript] Manage Application State with Immutable.js
Learn how Immutable.js data structures are different from native iterable Javascript data types and ...
- [React] Keep Application State in Sync with Browser History
Using pushState and passing route data via context allows our application to respond to route change ...
- [React] Update Application State with React Apollo ApolloConsumer Component
In this lesson I refactor some code that utilizes the Mutation component to update client-side cache ...
- React 全新的 Context API
Context API 可以说是 React 中最有趣的一个特性了.一方面很多流行的框架(例如react-redux.mobx-react.react-router等)都在使用它:另一方面官方文档中却 ...
- react中对于context的理解
一.context旧版的基本使用 1.context的理解 当不想在组件树中通过逐层传递props或state的方式来传递数据时,可使用context来实现跨层级的组件数据传递. 2.context的 ...
- React之使用Context跨组件树传递数据
--------------------------------- 讲解一 原文:https://blog.csdn.net/xuxiaoping1989/article/details/78480 ...
- react中的context的基础用法
context提供了一种数据共享的机制,里面有两个关键概念——provider,consumer,下面做一些key features描述. 参考网址:https://react.docschina.o ...
- React.js 的 context
这一节我们来介绍一个你可能永远用不上的 React.js 特性 —— context.但是了解它对于了解接下来要讲解的 React-redux 很有好处,所以大家可以简单了解一下它的概念和作用. 在过 ...
- React 深入系列3:Props 和 State
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...
随机推荐
- 7,NULL与nullptr对比
#include <iostream> #include <array> using namespace std; void show(int num) { cout < ...
- Javascript和jquery事件--键盘事件KeyboardEvent
Js和jq事件—键盘事件KeyboardEvent 键盘事件keydown,keypress和keyup,还需要涉及到一个文本事件textInput. keydown,keypress和keyup事件 ...
- spring mvc笔记
80214shuenjian224shuenjian@sina 北风网公开课课程大纲1.学习MVC框架的步骤2.Spring MVC运行机制3.演示Spring MVCAdd Maven suppor ...
- [React] Theme your application with styled-components and "ThemeProvider"
In this styled-components lesson, we set a "primary color" within a UI "theme" o ...
- update进行跨表之间的更新
有时我们可能须要多个表之间进行更新数据. 我们能够使用这个语句 UPDATE table1,table2 SET table1.column=table2.column, table1.column1 ...
- 三期_day03_环境搭建和客户页面_I
以下交代一下使用的框架 前端: EasyUI+Jquery+Ajax 后台: Spring+Structs2+mybatis 数据库: Oracle 使用工具: MyEclipse12+Maven 操 ...
- OC中对于属性的总结(@property)
在没有属性之前: 对成员变量进行改动都要用到设置器:setter来改动 Person *per =[[Person alloc] init]; 对象通过设置器对成员变量内容进行修该 [per setN ...
- Codeforces #28 C.Bath Queue (概率dp)
Codeforces Beta Round #28 (Codeforces format) 题目链接: http://codeforces.com/contest/28/problem/C 题意: 有 ...
- Surging Demo 项目之一
原文:Surging Demo 项目之一 开发与运行环境 IDE Visual Stadio 2017/Visual Stadio 2019 Visual Stadio Core Docker 和 D ...
- C# 泛型特化
C# 泛型不是 C++ 的模板类,并不支持特化和偏特化,但是使用一些技巧可以在一定程度上达到相同的目的. 原文是 po 在 stackoverflow 上的一个回答:A: Generic indexe ...