[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中的重点概念.特性和模式 ...
随机推荐
- eclipse4.3怎么集成jadclipse追踪源代码,现在windows-preferences-java
A.将net.sf.jadclipse_3.2.4.jar复制到D:\leaf\eclipse\plugins目录下. B.在d:\leaf下建立ecliplsePlungin\jadclips ...
- 深入理解HTTP协议及原理分析之缓存(3种缓存机制)
3.2 缓存的实现原理 3.2.1什么是Web缓存 WEB缓存(cache)位于Web服务器和客户端之间. 缓存会根据请求保存输出内容的副本,例如html页面,图片,文件,当下一个请求来到的时候:如果 ...
- Scala入门到精通——第二十二节 高级类型 (一)
作者:摇摆少年梦 视频地址:http://www.xuetuwuyou.com/course/12 本节主要内容 this.type使用 类型投影 结构类型 复合类型 1. this.type使用 c ...
- eclipse- log 打印跟输出到文件
1.在eclipse中打印log,经常使用的就是log.e(string,string) 代码中如下 @Override public boolean onTouchEvent(MotionEvent ...
- Python的数组合并
https://blog.csdn.net/hustqb/article/details/78090365 TypeError: can only concatenate list (not &quo ...
- c#下halcon配置
1.在halcon中写入算子,实现函数过程 比如: read_image(Image,'D:/MyFile/halcon/数字识别/1.jpg') decompose3(Image, ImageR, ...
- java中Arrays类的应用
java.util.Arrays类能方便地操作数组,它提供的所有方法都是静态的.具有以下功能: ² 给数组赋值:通过fill方法. ² 对数组排序:通过sort方法,按升序. ² 比较数组:通过equ ...
- uva 10710 - Chinese Shuffle(完美洗牌)
option=com_onlinejudge&Itemid=8&category=474&page=show_problem&problem=1651"> ...
- [React Intl] Install and Configure the Entry Point of react-intl
We’ll install react-intl, then add it to the mounting point of our React app. Then, we’ll use react- ...
- 如何获取已经安装到苹果手机上的App信息
//如何获取已经安装到苹果手机上的App信息? Is it possible to get the information (app icon, app name, app location) abo ...