react-fetch, 用于同构提取的组件包装,将响应传递给子级

分享于 

2分钟阅读

GitHub

  繁體 雙語
Component wrapper for isomorphic-fetch, passes response to children
  • 源代码名称:react-fetch
  • 源代码网址:http://www.github.com/Legitcode/react-fetch
  • react-fetch源代码文档
  • react-fetch源代码下载
  • Git URL:
    git://www.github.com/Legitcode/react-fetch.git
    Git Clone代码到本地:
    git clone http://www.github.com/Legitcode/react-fetch
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/Legitcode/react-fetch
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    响应

    安装

    
    npm install react-fetch
    
    
    
    

    道具

    • url: 从哪里获取json数据
    • onSuccess: 成功获取数据的功能
    • onError: 错误时要调用的函数
    • options: 包含请求参数的对象( 请参见获取规范)

    示例

    传递一个api端点,得到的对象将作为一个道具传递。

    importReactfrom'react'importReactDOMfrom'react-dom'importFetchfrom'react-fetch'exportdefaultclassAppextendsReact.Component{
     onError(error){
     console.log(error)
     }
     render(){
     return (
     <Fetch url="http://httpbin.org/headers" onError={this.onError}><TestComponent/></Fetch> )
     }
    }classTestComponentextendsReact.Component{
     render(){
     return (
     <div> {this.props.headers?<div>Your User-Agent: {this.props.headers['User-Agent']}</div>:'loading'}
     </div> )
     }
    }ReactDOM.render(<App />, document.getElementById('app'));

    重建

    运行这里命令以查看 example/dist 中的示例

    
    npm install
    
    
    npm run build
    
    
    
    

    COM  WRAP  换行  component  ISO  Fetch  
    相关文章