Meteor和React：根據登錄狀態呈現的正確方式

我有一個帶有登錄功能的Meteor + React應用程序。主導航欄根據用戶的登錄狀態顯示不同的項目。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> 
     ) 
    } 
}

我認爲這是幫助解決這個問題所需的所有相關代碼，但讓我知道我是否應該做其他事情。不知道是否將道具通過像我這樣的組件傳遞給對方是正確的做法，所以如果我在那裏搞亂了，請給我一個提醒。

非常感謝幫助！

來源

2016-12-28 Barry Michael Doyle

你是否在打包組件以接收Meteor的反應數據？ – Orbit

@Orbit我不知道該怎麼做...... –

你需要包裝你的組件以使用Meteor的反應數據。

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

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

用戶對象將被存儲在this.props.user中。您可以使用它來有條件地呈現視圖。

來源

2016-12-28 19:11:09 Orbit

啊，甜蜜，那有效。謝謝！ –

Meteor和React：根據登錄狀態呈現的正確方式

回答

相關問題