Meteor 包中的 React 组件

Question

已于 2017-10-23 解决[见下文]

我正在尝试将 React 组件编写为 Meteor 包，但我认为我在某个地方做错了一些事情，而且我在网上找不到任何示例。

我的包设置如下：

Package.describe({
  name: 'bardia:mapackage',
  version: '0.0.1',
  summary: '',
  documentation: 'README.md'
});

Package.onUse(function(api) {
  api.versionsFrom('1.5.2');
  api.use('ecmascript');
  api.mainModule('mapackage.js');
});

我的 mapackage.js 和

import Comps from './Comps';

export const name = Comps;

我的 React 组件是这样的

import React, { Component } from 'react';

class Comps extends Component {
  render() {
    return (
      <div>
         welll this lah
      </div>
    );
  }
}

export default Comps;

将其导入到我的主应用程序时：

import {name} from 'meteor/bardia:mapackage'
const App = props => (
  <center>{name}</center>
);

它 returns 就像

<center data-reactroot=""></center>

If i replace export const name = Comps to export const name = 'Comps'; it will render 'Comps'. meaning, it only renders the string.

我怎么去上班！？

Answer 1

因此，在与另一位开发人员交谈后，我设法更好地了解了组件的渲染方式。作为一种解决方案，我使用 React-Router 重定向到每个组件，正如我最初希望的那样。

我正在使用 CleverBeagle Pup Boilerplate ，没什么特别的，它是一个最小的 Meteor - React 包，提供您需要的工具，而不会使事情过于复杂。

如果您想获取我的运行ning 代码，请克隆此存储库：REPO

克隆后，文件夹中运行 Meteor npm install 和 npm start , Read More

在包文件夹中，我创建了一个名为 Mapackage 的示例包，这就是所有魔法发生的地方。在进行测试时，我将对这个 repo 进行更改。

Comps.jsx

这只是一个简单的react组件，待导出

Mapackage.js

//Import Components that are going to be exported as Routes
import Comps from './Comps';

//Export Router and their components
const MaPack = ()=>{
  return(
    <div>
      <Route path='/maPack' exact={true} component={Comps} />
      //if you want more functionality on your routes
      <Route path='/maPack/:_id' exact={true} component={subMaPack} />
    </div>
  )
}

完成此操作后，您只需将路由组件导入路由器或交换机即可 Read More

Meteor 包中的 React 组件

React Component in Meteor Package

javascript

meteor

reactjs

meteor-packages

已于 2017-10-23 解决[见下文]

Comps.jsx

Mapackage.js