javascript – 如何使用react-router将顶级组件状态传递给路由？

我使用react-router设置了一个React应用程序,该应用程序通过Firebase进行身份验证.

我有这个工作,但我现在希望能够从主App组件管理登录用户(auth)的状态,并将其传递给子组件,而不必查询每个组件中的auth状态.

import React from 'react';
import ReactDOM from 'react-dom';
import { Router,Route,Link,browserHistory } from 'react-router';
import { createHistory } from 'history';

/*
  Firebase
*/
import Auth from './modules/Auth';
import Helpers from './modules/Helpers';

// Auth.unauth();
/*
  Import app modules
*/
import LogIn from './modules/LogIn';
import LogOut from './modules/LogOut';
import NotFound from './modules/NotFound';
import Register from './modules/Register';
import Dashboard from './modules/Dashboard';
import ResetPassword from './modules/ResetPassword';
import ChangePassword from './modules/ChangePassword';
import MyAccount from './modules/MyAccount';


const App = React.createClass({

  getInitialState: function() {
    return {
      loggedIn: Auth.getAuth(),userType: null
    }
  },setUserLevel: function(authData) {
    if(authData){
      Auth.child('users/'+authData.uid+'/user_level').once('value',(snapshot) => {
          this.setState({ userType: Helpers.getUserType(snapshot.val()) })
        },(error) => {
          this.setState({
            userType: Helpers.getUserType(0),error: error
          });
        }
      );
    }
  },updateAuth: function(loggedIn) {
    // console.log('Updating Auth');

    this.setUserLevel(loggedIn);

    this.setState({
      loggedIn: loggedIn
    })
  },componentWillMount: function() {
    Auth.onAuth(this.updateAuth);
  },render: function() {

    var regButton = (this.state.loggedIn) ? null : (

我现在陷入困境,因为我无法找到将App组件的loggedIn状态作为子组件的属性向下传递的方法.

这反应路由器甚至可以实现吗？

最佳答案

我知道如何使用the React.Children utility的最佳方式.这是一个快速的Codepen,可以看到实际的概念. http://codepen.io/anon/pen/RrKbjZ

因此,示例中App组件的render()函数中的代码看起来像这样.

render: function() {

  var regButton = (this.state.loggedIn) ? null : (

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。