Meteorアカウントの動作を変更する方法 - ユーザーがログインすると、ログアウトフォームが自動的に表示され、その逆のメッセージが表示されます

Question

ユーザーがログインすると、クラスを「ログアウトフォーム」に追加しようとしましたログアウトフォームの表示プロパティをオーバーライドする '！important'タグでも 'display：block'私はページを再読み込みしようとしました。なぜなら、ユーザーがログインするとログアウトフォームが表示されるのですが、無限ループに陥ってしまいます。ほとんどの日、これに頭を叩いていた、どんな助けも大歓迎です。

import React from 'react'; 
import ReactDOM from 'react-dom'; 

export default class AccountsUI extends React.Component { 

    componentDidMount() { 
    Accounts._loginButtonsSession.set('dropdownVisible', true); 
    this.view = Blaze.render(Template.loginButtons, 
     ReactDOM.findDOMNode(this.refs.container)); 

     setTimeout(function() { 
     window.requestAnimationFrame(function() { 
      var node = ReactDOM.findDOMNode(); 
      if (node !== undefined){ 
      Accounts.onLogin(function(user){ 
       document.getElementById('login-dropdown-list').className = "accounts-dialog hide-div" 
       console.log(document.getElementById('login-dropdown-list').className) 
      }) 
      } 
     }); 
     }, 250) 
    } 

    componentWillUnmount() { 
    Blaze.remove(this.view); 
    } 

    render() { 
    return <span ref="container" /> 
    } 
} 

また、クラスの追加がどのようにトリガーされるかを変更します。私は1/4秒待つことは非常に原始的であり、いつもうまくいくわけではないことを知っています。

Answer 1

Meteor.userId()機能はリアクティブです。つまり、で呼び出すと、userIdが変更されるたびに再び呼び出されます。 this.dataに保存し、render()で使用してください。

また、ラップだけを行うBlazeコンポーネント用のLogoutUIWrapperというReactラッパーを作成することをお勧めします。ここを参照してください：https://www.meteor.com/tutorials/react/adding-user-accounts

ですから、このような何かをする必要があります

export default class AccountsUI extends React.Component { 
    getMeteorData() { 
    return { 
     userId: Meteor.userId(), 
    }; 
    } 

    render() { 
    return (
     <div> 
     { this.data.userId ? null : <LogoutUIWrapper /> } 
     </div> 
    ); 
    } 
} 

この方法でユーザーがログインしているときLogoutUIWrapperコンポーネントのみが表示されます

。