流星 - 在路線中的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模板

回答

相關問題