0

我有一个具有登录功能的 Meteor + React 应用程序。主导航栏根据用户的登录状态显示不同的项目。

我的问题是，当用户登录时，它不会像预期的那样自动更新导航栏。它仅在重新加载页面或更改路线后显示。

这显然违背了使用 React 的伟大之处。

这就是我所拥有的：

应用容器

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>
        )
    }
}

标题

export class Header extends Component {
    render() { 
        return (
            <header className="main-header">
                ...
                <nav className="navbar navbar-static-top" role="navigation">
                    <a href="#" className="sidebar-toggle" data-toggle="offcanvas" role="button">
                        <span className="sr-only">Toggle navigation</span>
                    </a>
                    <CustomNav isAuthenticated={this.props.isAuthenticated} />
                </nav>
            </header>
        )
    }
}

自定义导航

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

我认为这就是帮助解决此问题所需的所有相关代码，但请告诉我是否应该做其他事情。不确定是否像我这样通过组件向下传递道具是正确的做法，所以如果我也搞砸了，请给我一个提示。

非常感谢您的帮助！

4

1 回答 1

2

您需要包装您的组件以使用 Meteor 的反应数据。

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

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

用户对象将存储在this.props.user. 您可以使用它来有条件地渲染视图。

于 2016-12-28T19:11:09.647 回答