我有一个名为Header.js的组件,在其中渲染标题,并处理用户登录,在该组件中,我分配用于支持有关当前用户的数据:
import React, { Component } from "react";
import firebase from "firebase";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import credentials from "../credentials";
import { MenuItem, Navbar, Nav, NavItem, NavDropdown } from "react-
bootstrap";
firebase.initializeApp({
apiKey: credentials.apiKey,
authDomain: credentials.authDomain
});
class header extends Component {
constructor() {
super()
this.state = { isSignedIn: false };
this.uiConfig = {
signInFlow: "popup",
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
callbacks: {
signInSuccessWithAuthResult: () => false
}
}
}
componentDidMount = () => {
firebase.auth().onAuthStateChanged(user => {
this.setState({ isSignedIn: !!user });
this.setState({ user: user });
console.log(this.state.user);
});
};
render() {
return (
<div>
{this.state.isSignedIn ? (
<Navbar inverse collapseOnSelect className="Navbar">
<Navbar.Header>
<Navbar.Brand>
<a href="#brand">
{" "}
Welcome{" "}
{
firebase.auth().currentUser.displayName.split(" ")[0]
} {" "}
</a>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav>
<NavItem eventKey={1} href="#">
Link
</NavItem>
<NavItem eventKey={2} href="#">
Link
</NavItem>
<NavDropdown
eventKey={3}
title="Dropdown"
id="basic-nav-dropdown"
>
<MenuItem eventKey={3.1}>Action</MenuItem>
<MenuItem eventKey={3.2}>Another action</MenuItem>
<MenuItem eventKey={3.3}>Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey={3.3}>Separated link</MenuItem>
</NavDropdown>
</Nav>
<Nav pullRight>
<NavItem
eventKey={1}
onClick={() => {
firebase.auth().signOut();
}}
>
Signout
</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
) : (
<StyledFirebaseAuth
uiConfig={this.uiConfig}
firebaseAuth={firebase.auth()}
/>
)}
</div>
);
}
}
export default header;
我想在另一个名为Dashboard.js的组件中访问这些道具,例如用户名,电子邮件地址等,以便随后呈现并显示有关用户的信息:
import React, { Component } from "react";
class Dashboard extends Component {
constructor(props) {
super();
}
render() {
return <a> {JSON.stringify(this.state)} </a>;
}
}
export default Dashboard;
如何将在Header.js中分配的状态传递给Dashboard.js并显示这些道具?