meteor-react-layout, Meteor 支持的简单反应布局管理器

分享于 

6分钟阅读

GitHub

  繁體 雙語
Simple React Layout Manager for Meteor with SSR Support
  • 源代码名称:meteor-react-layout
  • 源代码网址:http://www.github.com/kadirahq/meteor-react-layout
  • meteor-react-layout源代码文档
  • meteor-react-layout源代码下载
  • Git URL:
    git://www.github.com/kadirahq/meteor-react-layout.git
    Git Clone代码到本地:
    git clone http://www.github.com/kadirahq/meteor-react-layout
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kadirahq/meteor-react-layout
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    注释

    使用 Meteor 1.3,使用响应挂载器,而不是。
    阅读本文以获得更多信息: 开始使用 Meteor 1.3并响应。

    响应布局

    Meteor 支持的简单React布局管理器。

    使用响应布局,你可以在客户端和服务器中轻松地呈现响应组件。 在服务器中,它使用路由器api的流。

    将它添加到你的项目中

    
    meteor add kadira:react-layout
    
    
    
    

    然后使用 ReactLayout.render() 来渲染组件。 你还可以将它的作为布局管理器使用,而不是简单地呈现组件,如流布局。

    让我们来看看使用React布局的几种方法

    呈现简单组件

    假设我们有一个非常简单的组件,如下所示:

    WelcomeComponent =React.createClass({
     render() { return <div>
     <h1>Hello, {this.props.name}</h1>
     </div>
     }
    });

    现在,我们可以使用以下方法呈现这里组件:

    ReactLayout.render(WelcomeComponent)

    注意,这里不创建元素,而是使用组件类。

    你也可以通过这样的道具:

    ReactLayout.render(WelcomeComponent, {name:"Arunoda"})
    用作布局管理器

    我们可以简单地使用ReactLayout作为简单的布局管理器。 假设我们有一个名为 MainLayout的布局。

    MainLayout =React.createClass({
     render() { return <div>
     <header>
     This is our header
     </header>
     <main>
     {this.props.content} </main>
     <footer>
     This is our footer
     </footer>
     </div>
     }
    });

    现在让我们尝试将 WelcomeComponent 渲染到 MainLayout 中。

    ReactLayout.render(MainLayout, {content: <WelcomeComponentname="Arunoda"/>
    })

    完成。

    使用内部流路由器

    流量路由器的响应布局效果非常好。 下面是一个示例:

    FlowRouter.route("/", {
     subscriptions: function() {
     varselector= {category: {$ne:"private"}}; this.register('posts', Meteor.subscribe('posts', selector));
     },
     action: function() {
     ReactLayout.render(BlogLayout, {content: <PostList/>
     });
     }
    });FlowRouter.route('/post/:_id', {name:'post',
     subscriptions: function(params) { this.register('singlePost', Meteor.subscribe('singlePost', params._id));
     },
     action: function(params) {
     ReactLayout.render(BlogLayout, {content: <PostPage_id={params._id}/>
     });
     }
    });
    向 root-元素添加自定义道具

    有时,你需要为 root 元素设置类和其他道具。 那就是这么做的。 在渲染任何内容之前,只需调用以下函数:

    ReactLayout.setRootProps({
     className:"ui middle aligned center aligned grid"});

    如果你正在使用 setRootProps,则需要在服务器端调用。

    使用React上下文

    如果你想使用 getChildContext() ( 对于集成的材料ui插件,例如),则必须在布局中呈现子组件 。 你可以通过传递呈现组件而不是组件本身的函数来实现这里目的。 在布局组件中,你可以直接调用函数来呈现组件。 有关完整讨论,请参阅 #2

    MainLayout =React.createClass({childContextTypes: {muiTheme:React.PropTypes.object },
     getChildContext: function() {
     return {muiTheme:ThemeManager.getCurrentTheme()
     };
     },
     render() { return <div>
     <header>
     This is our header
     </header>
     <main>
     {this.props.content()}/* note, this is a function call */
     </main>
     <footer>
     This is our footer
     </footer>
     </div>
     }
    });HomePage =React.createClass({
     render () { return (
     <div>
     <h1>This is the home page</h1>
    /* Rendering of material-ui components will work here */
     </div>
     );
     }
    });FlowRouter.route('/', {name:'home',
     action: function(params) {/* The key 'content' is now a function */ReactLayout.render(MainLayout, {
     content() { return <HomePage/>;
     }
     });
     }
    });
    支持

    SSR支持仍然是实验性的,你需要使用 meteorhacks:flow-router-ssr。 让我们看看这个示例应用程序( )。


    相关文章