我是社区的新手,但我一直在搜索一个星期,看看我的问题之前是否得到了回答,但显然与带有 React 的 meteor 1.4 相关的不多。
所以我正在构建一个应用程序(我是 Meteor + React 的新手),它读取存储在服务器上的一个巨大的 XML 文件,然后需要从中提取一些数据,显示它,然后启动一些其他功能在不同的页面上获取数据,所以我认为将这个解析为 JSON 对象的 XML 存储到 session 变量中是个好主意,但问题很快就开始了,因为第一个简单的数据提取没有反应。
这是代码:
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
FlightPlan = new Mongo.Collection("flightPlan");
export default class FlightPlanWrapper extends Component {
constructor(props) {
super(props);
}
xmlDemo(){
Meteor.call('xmlDemo',function(error,flightPlanXML){
let tempXML = flightPlanXML;
Session.set({
'flightPlanXML': flightPlanXML
});
});
}
render() {
const flightNumber = Session.get('flightPlanXML') ? (
<span className="flightNumber">{Session.get('flightPlanXML').FlightPlan.FlightInfo.aTCCallsign}</span>
) : '';
return (
<div id='flightPlan' className='contentWrapper'>
<h2>
Flight Plan
</h2>
{
Session.get('flightPlanXML') ? flightNumber :
<div>
<button onClick={this.xmlDemo.bind(this)}>click me</button>
</div>
}
</div>
);
}
}
export default createContainer (() => {
Meteor.subscribe('flightPlan');
return {
'resolutions': FlightPlan.find().fetch()
};
}, FlightPlanWrapper);
所以我不确定我对系统的理解是否完全正确,但我想在这个简化版本的代码中做的是显示按钮或该 session 变量的内容。
请注意,当我在单击按钮后更改页面然后返回同一页面时,内容会正确更新。
最佳答案
使用 Meteor + React,所有响应式 Meteor 数据源(例如数据库集合 find
调用和 Session.get
)都需要在 createContainer
。所以你需要这样做:
export default createContainer (() => {
Meteor.subscribe('flightPlan');
return {
'resolutions': FlightPlan.find().fetch(),
flightPlan: Session.get('flightPlanXML')
};
}, FlightPlanWrapper);
然后您可以在渲染函数中使用 this.props.fightPlan
。
请注意,如果您的 XML 文件的内容在服务器上发生更改,则更改不会反射(reflect)在 UI 中,这不是 react 性的。如果这是您想要的,我建议您在服务器上编写一个脚本,从 XML 中提取数据并将其写入 Mongo 数据库,供 Meteor 像使用任何其他数据库数据一样使用。
Cod3Citrus 要求的澄清
要了解为什么这是必要的,您必须了解 React react 性和 Meteor react 性是两个不同的事物。 React react 性的工作原理是,当且仅当组件的 props
或 state
发生变化时,它的 render
函数才会重新运行。 Meteor react 性起作用,因此当一个 react 性数据源(例如collection.find
或Session.get
)在 react 上下文改变值,这个 react 上下文重新运行。 Meteor react 上下文的示例是 Tracker.autorun
和传递给 createContainer
的数据函数。因此,将 Meteor react 数据源 (Session.get
) 放在 react react render
函数中将不起作用。
关于session - Meteor + React - session 变量不 react ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38806627/