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

前端之家收集整理的这篇文章主要介绍了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 : (logout">Log outlogout" component={logout} onEnter={requireAuth} />
      

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

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

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

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

render: function() {

  var regButton = (this.state.loggedIn) ? null : (logout">Log out
原文链接:https://www.f2er.com/js/428944.html

猜你在找的JavaScript相关文章