在流星包中反應組件

Question

於2017-10-23解決[請參見下文]

我正在嘗試將React Components編寫為Meteor Packages，我認為我在某處做錯了非常嚴重的事情，而且在網上找不到任何示例。

我的包裹設置如下：

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;

和我的反應組件是這樣的

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>
);

它只是返回

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

如果我將export const name = Comps替換為export const name ='Comps'; 它將呈現“ Comps”。 意思是，它只渲染字符串。

我怎么去上班！？

Answer 1

因此，在與另一位開發人員交談之后，我設法更好地了解了組件的呈現方式。 作為一種解決方案，我使用React-Router重定向到每個組件，就像我最初希望的那樣。

我使用的是CleverBeagle Pup Boilerplate，這沒什么花哨的，它是最小的Meteor-React軟件包，可提供您所需的工具而不會使事情復雜化。

如果要獲取我的運行代碼，請克隆此倉庫： REPO

克隆后，在文件夾中運行Meteor npm install並npm start ， 了解更多信息

在package文件夾中，我創建了一個名為Mapackage的示例包，這是所有魔術發生的地方。 在進行測試時，我將對此倉庫進行更改。

---

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>
  )
}

---

完成此操作后，您只需將路由組件導入路由器或交換機即可。 閱讀更多