React从另一个组件获取道具

Question

我有一个名为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并显示这些道具？