我已经使用react-router
Firebase 进行身份验证设置了一个React应用.
我有这个工作,但我现在希望能够从主App
组件管理登录用户(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 : (Register); var accountButton = (this.state.loggedIn) ? (My Account) : null; return (); } }) function requireAuth(nextState, replaceState) { if (!Auth.getAuth()) replaceState({ nextPathname: nextState.location.pathname }, '/login') } function notWhenLoggedIn(nextState, replaceState) { if (Auth.getAuth()) replaceState({ nextPathname: nextState.location.pathname }, '/dashboard') } var routes = ({this.props.children}) ReactDOM.render(routes, document.querySelector('#main'));
我现在陷入困境,因为我无法找到一种方法state
将App
组件的loggedIn 作为属性传递给子组件.
这有可能react-router
吗?