Meteor(React) - 动态反应常量组件（布局）

Question

我正在尝试使布局反应动态加载其他组件。下面是一个布局代码 -

import React from 'react';
import UMLogin from '../login/components/UMLogin.jsx';

export const MainLayouts = ({content})=>( 
<div>
    { Meteor.userId() ? 

    <div className="main-layout col-lg-12 col-md-12 col-sm-12 col-xs-12 noPadLR">
      <div className="container-bottom col-sm-12 col-xs-12">
         {content}
      </div>
    </div> 

    : <UMLogin /> 
    }
</div>
);

我的路由器之一看起来像：-

FlowRouter.route('/contactUs',{
 action: function(params, queryParams) {
    mount(MainLayouts,{
        content : (<ManageContact />),
    });
}
});

问题陈述：-如果用户登录呈现内容，否则显示登录页面，即重新呈现登录组件。

如果用户登录，它会显示内容。我在控制台触发命令 Meteor.logout()，用户记录 out.But 它不会反映在浏览器中。但是，如果我触发命令 Meteor.userId()，它会给出 null，即用户已注销。要查看更改，我需要刷新页面，然后只有登录组件呈现，因为 MainLayouts 不是反应性的。

提前致谢！

Answer 1

得到解决方案：

import React from 'react';
import MenuBarContainer from './SpotylHeader.jsx';
import SpotylUserHeaderContainer from './SpotylUserHeader.jsx';
import Fraud from '../dashboard/components/Fraud.jsx';
import { withTracker } from 'meteor/react-meteor-data';
import PropTypes from 'prop-types';
import UMLogin from '../login/components/UMLogin.jsx';


const UserLayouts = ({loggingIn, content})=>( 
<div>
{ loggingIn ? 

<div className="main-layout col-lg-12 col-md-12 col-sm-12 col-xs-12 noPadLR">
    <SpotylUserHeaderContainer/>
   <div className="container-bottom col-sm-12 col-xs-12">
     {content}
  </div>
</div> 

: <UMLogin /> 
}
</div>
); 

UserLayouts.propTypes = {
 loggingIn : PropTypes.bool
};

 MainLayouts = withTracker(props => {
 // Do all your reactive data access in this method.
 // Note that this subscription will get cleaned up when your 
 component is unmounted

const login    = Meteor.userId();

if(login){
    var loggingIn = true;
}else{
    var loggingIn = false;
}
    return {
        loggingIn
    };  
})(UserLayouts);

export default MainLayouts;

Meteor(React) - 动态反应常量组件（布局）

Meteor(React) - Dynamic Reactive const component(layout)

meteor-react