我使用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