使用React和Material UI创建动态页眉UI

在我的header.jsx文件中，我有：

// Default Import Statements go here
var Login = require(login.jsx)
const HeaderComponent = React.createClass({
  getInitialState () {
    return {
      loggedIn: false,
    };
  },
  render() {
    return (
      <Toolbar>
        <ToolbarGroup key={1} float="right">
          <Login />
        </ToolbarGroup>
      </Toolbar>
    );
  }
});
module.exports = HeaderComponent;

在我的登录组件（Login.jsx）中：

// Default Import Statements
var LoginDialog = React.createClass({
  render() {
    return (
      <div>
        <Dialog
          title="Login"
          ref="loginDialog"
          autoScrollBodyContent = {true}
          onRequestClose={this._cancelTouchTap}
          open={this.state.open}>
          <form action="/login" method="post" autoComplete="off">
            <div>
              <TextField hintText="Email Field" ref = "email" />
            </div>
            <div>
              <TextField hintText="Password" type="password" ref = "password"/>
            </div>
            <div>
              <RaisedButton label="Submit" onTouchTap={this._submitTouchTap}/>
              <RaisedButton label="Cancel" onTouchTap={this._cancelTouchTap}/>
            </div>
          </form>
        </Dialog>
        <FlatButton label="Login" style={loginSpacing} primary={true} onTouchTap={this._handleTouchTap} />
      </div>
    );
  },
  _submitTouchTap: function(){
    var primaryEmail = this.refs.email.getValue();
    var password = this.refs.password.getValue();
    var data = {
      primaryEmail: primaryEmail,
      password: password
    };
    $.ajax({
      url: '/login',
      dataType: 'json',
      type: 'post',
      data: data,
      success: function(data) {
        console.log(data);
      }.bind(this),
      error: function(xhr, status, err) {
        this.transitionTo('/login'); 
      }.bind(this)
    });
    this.refs.loginDialog.setState({open: false});
  },
  _cancelTouchTap: function(){
    this.refs.loginDialog.setState({open: false});
  },
  _handleTouchTap() {
    this.refs.loginDialog.setState({open: true});
  }
});
module.exports = LoginDialog;

当用户登录时，一旦ajax调用返回成功，我想将头的loggedIn状态切换为true。然而，我不太确定如何将数据从单独的文件（childlogin.jsx）传递到父文件（header.jsx）中。有人知道我如何做到这一点，以便为头创建动态UI吗？

一旦用户登录，标头组件中loggedIn的状态应返回true。一旦这是真的，我将显示一个不同于当前显示的标题。