[英]React Component in Meteor Package
I'm trying to write React Components as Meteor Packages and i think i do something terribly wrong somewhere and i can't find any samples anywhere online. 我正在尝试将React Components编写为Meteor Packages,我认为我在某处做错了非常严重的事情,而且在网上找不到任何示例。
I Have my Package setup like this: 我的包裹设置如下:
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');
});
And my mapackage.js as 和我的mapackage.js作为
import Comps from './Comps';
export const name = Comps;
and my react component like this 和我的反应组件是这样的
import React, { Component } from 'react';
class Comps extends Component {
render() {
return (
<div>
welll this lah
</div>
);
}
}
export default Comps;
and when importing it to my main App as: 并将其导入到我的主应用程序时为:
import {name} from 'meteor/bardia:mapackage'
const App = props => (
<center>{name}</center>
);
it returns as just 它只是返回
<center data-reactroot=""></center>
If i replace export const name = Comps to export const name = 'Comps';
如果我将export const name = Comps替换为export const name ='Comps'; it will render 'Comps'.
它将呈现“ Comps”。 meaning, it only renders the string.
意思是,它只渲染字符串。
how can i get to work !? 我怎么去上班!?
So after talking to another developer, i managed to get a better understanding on how the components were being rendered. 因此,在与另一位开发人员交谈之后,我设法更好地了解了组件的呈现方式。 As a solution i Used React-Router to redirect to each components, as i initially wanted it to be that way.
作为一种解决方案,我使用React-Router重定向到每个组件,就像我最初希望的那样。
I'm using CleverBeagle Pup Boilerplate , Nothing fancy about it it's a minimal Meteor - React package that provides the tools you need without overcomplicating things. 我使用的是CleverBeagle Pup Boilerplate,这没什么花哨的,它是最小的Meteor-React软件包,可提供您所需的工具而不会使事情复杂化。
if you want to get my running code, clone this repo : REPO 如果要获取我的运行代码,请克隆此仓库: REPO
once you cloned it , run Meteor npm install
in the folder and npm start
, Read More 克隆后,在文件夹中运行
Meteor npm install
并npm start
, 了解更多信息
in the package folder i created a sample package, called Mapackage
, that's where all the magic happens. 在package文件夹中,我创建了一个名为
Mapackage
的示例包,这是所有魔术发生的地方。 I'll commit changes to this repo as i'm doing my tests. 在进行测试时,我将对此仓库进行更改。
This is just a simple react component, to be exported 这只是一个简单的react组件,可以导出
//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>
)
}
Once you're done with this you can simply import the Route comonent to your Router or Switch Read More 完成此操作后,您只需将路由组件导入路由器或交换机即可。 阅读更多
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.