加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React实践系列笔记-Library

发布时间:2020-12-15 04:49:09 所属栏目:百科 来源:网络整理
导读:React Router 再谈 React Router 使用方法(以下部分示例直接截取自该文,向该文作者致敬 ) Quick Start React Router主要也是基于路径匹配并且注入不同的组件,一般步骤,首先声明根组件,即是所有路由的容器: var RouteHandler = Router.RouteHandler; var

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读