react-outlet, 用于响应的底部 Transclusion

分享于 

5分钟阅读

GitHub

  繁體 雙語
Transclusion helpers for React.js
  • 源代码名称:react-outlet
  • 源代码网址:http://www.github.com/carlsverre/react-outlet
  • react-outlet源代码文档
  • react-outlet源代码下载
  • Git URL:
    git://www.github.com/carlsverre/react-outlet.git
    Git Clone代码到本地:
    git clone http://www.github.com/carlsverre/react-outlet
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/carlsverre/react-outlet
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    React输出 Travisnpm package

    用于 React.js的 Transclusion帮助器

    
    npm install react-outlet --save
    
    
    
    

    React出口提供了两个组件,它帮助 React.js,的跨组件 transclusion,即出口和插头组件。

    插座通过outletId属性与插头连接。 插座和插头之间有 1 -1的关系。

    示例用例是包含两个面板的父页面。 一个面板显示子组件,而另一个面板包含几个其他组件。 父组件可能希望赋予子组件在侧面板中呈现附加组件的能力。 父级可以简单地将outletId传递给子级,而不是将整个布局推向子( 并且可能在多个子进程之间复制大量代码)。 然后孩子可以在不松动控制( 或者导致其他呈现)的情况下将任意内容呈现到面板中。

    所有这些都是在响应生命周期内完成的,并且不是异步的。

    同样的Pattern 可以用来构建其他复杂组件,如模式或者工具提示。

    用法示例

    varOutlet =require("react-outlet").Outlet;varPlug =require("react-outlet").Plug;varParent =React.createClass({
     componentWillMount: function() { this.setState({header_outlet:Outlet.new_outlet_id()
     });
     },
     render: function() { return (
     <div>
     <Header>
     Awesome parent
     <OutletoutletId={ this.state.header_outlet}/>
     </Header>
     <Childoutlet={ this.state.header_outlet}/>
     </div>
     );
     }
    });varChild =React.createClass({
     render: function() { return (
     <div>
     I am the child
     <PlugoutletId={ this.props.outlet}>
     I will appear in the header.
     </Plug>
     </div>
     );
     }
    });

    组件 API

    Static Methods:
    Outlet.new_outlet_id()
     Generate and return a new outlet id. Should be passed into Outlet and Plug
     components as the outletId prop.
    Outlet.reset()
     Reset the Outlet's registry. This was added for server-side React usage.
    Components:
    <OutletoutletId={outlet_id }/>
     Render an outlet somewhere in the React component tree. By default this
     will render into an empty <div/>. Any props other than outletId will be
     passed to the underlying <div/> so the outlet is easily classable.
     The outletId prop ties this Outlet to a Plug.
    <PlugoutletId={outlet_id }>{.. . children go here.. . }</Plug>
     When a plug has children the children will appear in the associated Outlet
     (associated means the outlet has the same outletId as this plug). You can
     still use all of the normal React features such as event listeners and so on
     on the Plug's children.

    在 React.js-社区中相关工作

    我想给乔布斯 Critchley ( @joecritchley ) 提供一些有关各种出口/门户实现的非常大的想法。 以下是他的各种实现的链接:


    相关文章