帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:React Router  route  数据  react  LOC  路由器  Locate  
Co-located data loading for React Router

  • 源代码名称:async-props
  • 源代码网址:http://www.github.com/ryanflorence/async-props
  • async-props源代码文档
  • async-props源代码下载
  • Git URL:
    git://www.github.com/ryanflorence/async-props.git
  • Git Clone代码到本地:
    git clone http://www.github.com/ryanflorence/async-props
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/ryanflorence/async-props
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • 用于响应路由器的 AsyncProps

    npm package#rackt on freenode

    为响应路由器应用定位数据加载。 在新屏幕呈现之前加载数据。 它为许多应用程序都是一个有用的解决方案,以及将数据集成到React路由器( redux,relay,falcor等东西)的参考实现。

    文档&帮助

    有关问题和支持,请访问上的通道,或者堆栈溢出。 问题跟踪程序是专门针对报告和功能请求的 。

    安装

    使用 npm插件:

    
    $ npm install async-props
    
    
    
    

    然后使用类似于 web pack的模块 bundler,像你所做的那样使用:

    // using an ES6 transpiler, like babelimportAsyncPropsfrom'async-props'

    UMD构建也可以在 npmcdn 上获得:

    <scriptsrc="https://npmcdn.com/async-props/umd/AsyncProps.min.js"></script>

    你可以在 window.AsyncProps 上找到图书馆。

    注释

    这是 pre,虽然很接近。 如果你使用它,那么你是一个贡献者。 请添加所有请求请求的测试。

    用法

    import { Router, Route } from'react-router'importAsyncPropsfrom'async-props'importReactfrom'react'import { render } from'react-dom'classAppextendsReact.Component {
     // 1. define a `loadProps` static methodstaticloadProps(params, cb) {
     cb(null, {
     tacos: [ 'Pollo', 'Carnitas' ]
     })
     }
     render() {
     // 2. access data as props :Dconsttacos=this.props.tacosreturn (
     <div><ul> {tacos.map(taco=> (
     <li>{taco}</li> ))}
     </ul></div> )
     }
    }// 3. Render `Router` with AsyncProps middlewarerender((
     <Router render={(props) =><AsyncProps {...props}/>}><Route path="/" component={App}/></Router>), el)

    电子邮件服务器

    import { renderToString } from'react-dom/server'import { match, RoutingContext } from'react-router'importAsyncProps, { loadPropsOnServer } from'async-props'app.get('*', (req, res) => {
     match({ routes, location:req.url }, (err, redirect, renderProps) => {
     // 1. load the propsloadPropsOnServer(renderProps, (err, asyncProps, scriptTag) => {
     // 2. use `AsyncProps` instead of `RoutingContext` and pass it// `renderProps` and `asyncProps`constappHTML=renderToString(
     <AsyncProps {...renderProps} {...asyncProps} /> )
     // 3. render the script tag into the server markupconsthtml=createPage(appHTML, scriptTag)
     res.send(html)
     })
     })
    })functioncreatePage(html, scriptTag) {
     return` <!doctype html> <html> <!-- etc. ---> <body> <div id="app">${html}</div> <!-- its a string -->${scriptTag} </body> </html>`}

    API

    请参考这个例子,因为它练习整个 API。 文档最终会出现:)



    文章标签:数据  react  LOC  route  路由器  React Router  Locate  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语