Meteor(React) - 动态响应式 const 组件（布局）答案

【问题标题】：Meteor(React) - Dynamic Reactive const component(layout)Meteor(React) - 动态响应式 const 组件（布局）
【发布时间】：2017-11-09 07:47:55
【问题描述】：

我正在尝试使布局具有响应性，从而动态加载其他组件。下面是一个布局代码 -

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()，用户注销。但它没有反映在浏览器中。但是如果我触发 Meteor.userId() 命令，它会给出 null 即用户已注销。要查看更改，我需要刷新页面，然后只有登录组件呈现，因为 MainLayouts 不是响应式的。

提前致谢！

【问题讨论】：

标签： meteor-react

【解决方案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;

【讨论】：