如何在 blaze 中使用 React 组件？

Question

我做了一个Header组件。现在我想在我的 blaze 模板中添加 header 组件，但是在将它添加到 blaze 模板之后，我在我的网页上看不到任何变化。

代码：

Header.jsx:

import React from 'react';

const Header = () => {

    return(
        <div>
        <div>
                <h2>Hello World. I am header component</h2>
        </div>

        </div>

    )
}

export default Header;

header.html:

<template name="LeagueHeader">
{{#if isCordova}}
  {{> HeaderMobile }}
{{else}}
    <div>
        {{> React component=Header }}
    </div>
{{/if}}
</template>

上面的代码为什么不起作用？我没有收到任何错误。我是否需要添加 returns Header 反应组件的辅助函数？

Answer 1

如文档中所述，@Tholle linked to you

您确实需要一个 header.js 文件来配合 header.html。这将包含助手，您需要用它来在 Blaze 模板中呈现组件。

该文件应与 header.html 位于同一文件夹中，并且应如下所示：

import { Template } from 'meteor/templating';

import './header.html';
import Header from './Header.jsx';

Template.LeagueHeader.helpers({
  header() {
    return Header;
  }
})

如何在 blaze 中使用 React 组件？

How to use react components in blaze?

reactjs

meteor-blaze