React实践系列笔记-Library
2015-09-05 21:06
615 查看
React Router
再谈 React Router 使用方法(以下部分示例直接截取自该文,向该文作者致敬 )Quick Start
React Router主要也是基于路径匹配并且注入不同的组件,一般步骤,首先声明根组件,即是所有路由的容器:
var RouteHandler = Router.RouteHandler; var App = React.createClass({ render () { return ( <div> <h1>App</h1> <RouteHandler/> </div> ) } });
然后声明全局的路由规则:
var Router = require('react-router'); var Route = Router.Route; // declare our routes and their hierarchy var routes = ( <Route handler={App}> <Route path="about" handler={About}/> <Route path="inbox" handler={Inbox}/> </Route> );
最后进行渲染操作:
Router.run(routes, Router.HashLocation, (Root) => { React.render(<Root/>, document.body); });
Params
Path Variables
Props传递
可以以一种Wrapper的方式,进行参数传递:
var React = require('react'); var wrapComponent = function(Component, props) { return React.createClass({ render: function() { return React.createElement(Component, props); } }); }; <Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>
Nested Router:嵌套路由
类似于angular-router中嵌套路由的概念,如果需要在某个子界面中嵌入一个新的路由规则,即二级路由,也可以直接配置在全局的routes中,不过需要在子界面中添加```<RouteHandler />```,新的组件同样会被注入到该<RouteHandler/>中,该Demo的全部在[这里](http://jsbin.com/duduta/20/edit?js,output)。
/** * 图书列表组件, */ var Books = React.createClass({ render: function() { return ( <div> <ul> <li key={1}><Link to="book" params={{id: 1}}>活着</Link></li> <li key={2}><Link to="book" params={{id: 2}}>挪威的森林</Link></li> <li key={3}><Link to="book" params={{id: 3}}>从你的全世界走过</Link></li> </ul> <RouteHandler /> </div> ); } });
React Canvas
18个React示例相关文章推荐
- React实践系列笔记-Interactivity and Dynamic UIs
- React实践系列笔记-Components
- React实践系列笔记-JSX
- React实践笔记-Quick Start
- 【JAVASCRIPT】React学习-如何构建一个组件
- 【JAVASCRIPT】React学习-JSX 语法
- 【JAVASCRIPT】React入门学习-文本渲染
- SGU 194. Reactor Cooling【无源汇上下界最大流】
- 2015前端各大框架比较(angular,vue,react,ant)
- React 实践记录 04 Flux demo
- React router
- Redux管理你的React应用
- [React] React Fundamentals: Integrating Components with D3 and AngularJS
- react.js 从零开始(四)React 属性和状态详解
- [React] React Fundamentals: with-addons - ReactLink
- React,用组件化思想写前端代码
- react-native试玩(6)-日期选择控件
- Reactor Pattern Explained
- ReactiveCocoa2 源码浅析
- react-native试玩(5)-小菊花控件