流星 - 在路线中的React模板中使用Blaze模板

我目前正在开发一个通过流星的反应性web应用程序，该应用程序正在使用模板：tabs包，该包设计用于创建表格界面。我计划在这些选项卡中显示数据表，并根据选择的选项卡类似于cars.com将查询发送到不同的数据库。流星 - 在路线中的React模板中使用Blaze模板

该应用程序已经有一个FlowRouter链接到两个不同的路线，我只希望制表符为其中之一。我希望显示标签的路由器如下。

#router.jsx 
FlowRouter.route('/', { 
action() { 
    mount(MainLayout, { 
     content: (<Landing />) 
    } 
) 
} 
});

我需要创建下面的模板：模板名称= “myTabbedInterface”>

#Tabs.html 
{{#basicTabs tabs=tabs}} 
<div> 


    <p>Here's some content for the <strong>first</strong> tab.</p> 

</div> 

<div> 

    <p>Here's some content for the <strong>second</strong> tab.</p> 

</div> 

<div> 

    <p>Here's some content for the <strong>third</strong> tab.</p> 

</div> 

    {{/basicTabs}} 

</template>

这里是具有模板的助手JS文件。

#myTabbedInterface.js 
ReactiveTabs.createInterface({ 
    template: 'basicTabs', 
    onChange: function (slug, template) { 
    // This callback runs every time a tab changes. 
    // The `template` instance is unique per {{#basicTabs}} block. 
    console.log('[tabs] Tab has changed! Current tab:', slug); 
    console.log('[tabs] Template instance calling onChange:', template); 
    } 
}); 

Template.myTabbedInterface.helpers({ 
    tabs: function() { 
    // Every tab object MUST have a name and a slug! 
    return [ 
     { name: 'First', slug: 'reports' }, 
     { name: 'Second', slug: 'sources' }, 
     { name: 'Third', slug: 'feedback' } 
    ]; 
    }, 
    activeTab: function() { 
    // Use this optional helper to reactively set the active tab. 
    // All you have to do is return the slug of the tab. 

    // You can set this using an Iron Router param if you want-- 
    // or a Session variable, or any reactive value from anywhere. 

    // If you don't provide an active tab, the first one is selected by default. 
    // See the `advanced use` section below to learn about dynamic tabs. 
    return Session.get('activeTab'); // Returns "first", "second", or "third". 
    } 
});

最后，这里的文件“落地”的路线从路由器那里我想被称为模板：

#Landing.jsx 
`import {Blaze} from 'meteor/blaze'; 
import React, {Component} from 'react'; 
import { Meteor } from 'meteor/meteor'; 

export default class Landing extends Component{ 


render(){ 
    return(


    <div> 
    //Want to render template here 
    </div> 

    ) 
    } 

}`

那么怎么可能呈现（火焰）模板在React渲染的HTML中？谢谢。

来源

2016-07-15 Eric Lyness

我建议不要使用Blaze软件包来解决React问题。我知道这不是你问的，但也许它有帮助。

实现选项卡式UI真的是一件简单的事情，混合React和Blaze是不值得的。一个很好的库来解决这个问题是React-Bootstrap，它实现了一些有用的反应的组分像<Tab>：

<Tabs> 
    <Tab title="Apples">Apple content</Tab> 
    <Tab title="Pears">Pear content</Tab> 
    <Tab title="Melons">Melon content</Tab> 
</Tabs>

但如果你希望走这条道路，你可以尝试blazetoreact。

来源

2016-07-17 13:00:52 aedm

谢谢您的建议！我对流星相对比较陌生，不确定是否有一种简单的方法来整合我错过的这些功能。 –

流星 - 在路线中的React模板中使用Blaze模板

回答

相关问题