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

Question

我目前正在通过流星开发反应式Web应用程序，该应用程序使用template：tabs包设计用于创建表格界面。 我计划在这些选项卡中显示数据表，并将查询发送到不同的数据库，具体取决于与cars.com相似的选项卡。

该应用程序已经有一个FlowRouter，可以链接到两个不同的路线，我只希望其中的一个选项卡出现。 我希望显示选项卡的路由器如下。

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

我需要创建以下模板：template name =“ 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渲染（Blaze）模板呢？ 谢谢。

Answer 1

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

实现选项卡式UI确实是一个简单的任务，将React和Blaze混合在一起是不值得的。 一个很好的库来解决这个问题是React-Bootstrap ，它实现了几个有用的React组件，例如<Tab> ：

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

但是，如果您想走这条路，可以尝试起火反应 。