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（），用户注销。但它没有反映在浏览器中。但是如果我触发命令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） - 动态反应const组件（布局）

1 个答案: