React实践系列笔记-Library

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 hierarchyvar 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示例