流行と反応：ログイン状態に応じてレンダリングする正しい方法

Question

私はログイン機能を備えたMeteor + Reactアプリケーションを持っています。メインナビゲーションバーには、ユーザーのログイン状態に応じて異なる項目が表示されます。

私の問題は、ユーザーがログインしたときに、ナビゲーションバーが自動的に更新されないことです。ページがリロードされた後、またはルートが変更された後にのみ表示されます。

これは明らかにReactを使用することの偉大さに反するものです。

これは私が持っているものです。

AppContainer

export class AppContainer extends Component { 
    constructor(props) { 
     super(props) 
     this.state = this.getMeteorData() 
    } 

    getMeteorData() { 
     return { isAuthenticated: Meteor.userId() !== null} 
    } 

    render() { 
     return(
      <div className="hold-transition skin-green sidebar-mini"> 
       <div className="wrapper"> 
        <Header isAuthenticated={this.state.isAuthenticated} /> 
        <MainSideBar /> 
        {this.props.content} 
        <Footer /> 
        <ControlSideBar /> 
        <div className="control-sidebar-bg"></div> 
       </div> 
      </div> 
     ) 
    } 
} 

ヘッダー

​​

CustomNav

export class CustomNav extends Component { 
    render() { 
     if(this.props.isAuthenticated) { 
      navigation = <NavLoggedIn /> 
     } else { 
      navigation = <NavLoggedOut /> 
     } 
     return (
      <div className="navbar-custom-menu"> 
       {navigation} 
      </div> 
     ) 
    } 
} 

これを解決するのに必要なすべての関連コードがありますが、他に何かをしなければならないかどうかを教えてください。私がそうであるような部品を通って小道具を通すことが正しいことであるかどうかわからないので、私がそこにあまりにもうんざりしているなら、私に頭をあげてください。

大変助かりました！

Answer 1

Meteorの反応性データを使用するには、コンポーネントをラップする必要があります。

AppContainer.propTypes = { 
    user: PropTypes.object, 
}; 

export default createContainer(() => { 
    return { 
    user: Meteor.user(), 
    }; 
}, AppContainer); 

ユーザオブジェクトはthis.props.userに格納されます。条件付きでビューをレンダリングするために使用できます。